import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {Tab, Tabs,Checkbox,Card,CardHeader,CardText,TextField,Subheader,Avatar,RaisedButton} from 'material-ui';
import './style.scss';
import get from 'lodash.get';

@inject('appstate')
@observer
export default class SettingComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.defaultState = Object.assign({}, this.state);
    this.settingStore = props.appstate.setting;
    this.globalUI = props.appstate.globalUI;
    this.odooStore = props.appstate.odoo;
  }

  componentDidMount() {
    this.settingStore.getAll().then(res=>{
      console.log(res);
    });
  }

  changeSetting = (key)=>{
    this.settingStore.data[key] = !this.settingStore.data[key]
  }

  save = () => {
    const {userData} = this.props.appstate;

    if (userData.role == 'administrator'){
      this.settingStore.put(this.settingStore.data).then(res=>{
        this.globalUI.openSnackbar("Success Change Setting");
      }).catch(err=>{
        this.globalUI.openSnackbar(err.message);
      })
    }else if(userData.role == 'store'){}
  };

  refreshOdoo = ()=>{
      this.globalUI.openLoading();
      this.odooStore.syncData().then(res=>{
        console.log(res,'yeyeyeye');
        this.globalUI.openSnackbar('Refresh Data Succeed');
        this.globalUI.closeLoading();
      })
  };

  render() {
    const {userData} = this.props.appstate;

    return (
      <div className="setting containerMiddle">
        <div className="row">
          <div className="col l12 m12 s12">
            <Tabs
              value={'setting'}
              inkBarStyle={{background: 'transparent'}}
              className="tabsAkun"
              style={{background: 'transparent'}}
            >
              <Tab label="Setting" value="setting" className={"buttonTabs  buttonTabsActive"}>
                {userData.role == 'administrator' && <Card
                  className="cardLite"
                  initiallyExpanded={true}>
                  <CardHeader
                    title="Mobile Application"
                    subtitle="Set your mobile apps view and other"
                    avatar={<Avatar backgroundColor={"transparent"}
                                    style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
                                    src="/assets/images/icon/service/phone.png"/>}
                    actAsExpander={true}
                    showExpandableButton={true}
                    style={{backgroundColor: "#32325d"}}
                    titleStyle={{color: "white"}}
                    subtitleStyle={{color: "white"}}
                    iconStyle={{color: "white"}}
                  />
                  <CardText expandable={true}>
                    <div className="row">
                      <div className="col s12 m12 l12" style={{paddingLeft: 0}}>
                        <Subheader>Home page</Subheader>
                      </div>
                      <div className="col s12 m6 l6">
                        <Checkbox
                          label={"Show Slider"}
                          checked={get(this.settingStore.data,'show_banners')}
                          onCheck={() => this.changeSetting('show_banners')}
                        />
                      </div>
                      <div className="col s12 m6 l6">
                        <Checkbox
                          label="Show Featured Store"
                          checked={get(this.settingStore.data,'show_featured_stores')}
                          onCheck={() => this.changeSetting('show_featured_stores')}
                        />
                      </div>
                      <div className="col s12 m6 l6">
                        <Checkbox
                          label={"Show Category List"}
                          checked={get(this.settingStore.data,'show_categories')}
                          onCheck={() => this.changeSetting('show_categories')}
                        />
                      </div>
                      <div className="col s12 m6 l6">
                        <Checkbox
                          label="Show Category items"
                          checked={get(this.settingStore.data,'show_item_categories')}
                          onCheck={() => this.changeSetting('show_item_categories')}
                        />
                      </div>
                    </div>
                  </CardText>
                </Card>}
                {(userData.role == 'store' || userData.role == 'administrator') && <Card
                  className="cardLite"
                  initiallyExpanded={true}>
                  <CardHeader
                    title="Syncing Oddo Data"
                    subtitle="Refresh data sync from odoo to Sillyfish Marketplace"
                    avatar={<Avatar backgroundColor={"transparent"}
                                    style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
                                    src="/assets/images/icon/service/refresh.png"/>}
                    actAsExpander={true}
                    showExpandableButton={true}
                    style={{backgroundColor: "#32325d"}}
                    titleStyle={{color: "white"}}
                    subtitleStyle={{color: "white"}}
                    iconStyle={{color: "white"}}
                  />
                  <CardText expandable={true}>
                    <div className="row">
                      <div className="col s12" style={{paddingLeft: 0}}>
                        <Subheader>Press the button below to refresh</Subheader>
                      </div>
                      <div className="col s12">
                        <RaisedButton label="Refresh Now" primary={true} style={{margin: "12px 0px"}} onClick={this.refreshOdoo}/>
                      </div>
                    </div>
                  </CardText>
                </Card>}
                {userData.role == 'administrator' && <div style={{textAlign: "right"}}>
                  <RaisedButton label="Save" primary={true} style={{margin: "12px 0px"}} onClick={this.save}/>
                </div>}
              </Tab>
            </Tabs>
          </div>
        </div>
      </div>
    )
  }
}
