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.myStore = props.appstate.myStore;
    this.globalUI = props.appstate.globalUI;
  }

  async componentDidMount() {
    this.myStore.setRequestQuery({user_store_id : this.props.id});
    this.myStore.getAll()
  }

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

  save = ()=>{
    this.myStore.update(this.myStore.data.id,this.myStore.data).then(res=>{
      this.globalUI.openSnackbar("Success Change Setting");
    }).catch(err=>{
      this.globalUI.openSnackbar(err.message);
    })
  }

  render() {
    return (
      <div className="row">
        <div className="col l12 m12 s12">
                <Card
                  className="cardLite"
                  initiallyExpanded={true}>
                  <CardHeader
                    title="Store"
                    subtitle="Configure the setting for this store"
                    avatar={<Avatar backgroundColor={"transparent"}
                                    style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
                                    src="/assets/images/icon/store-white.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={"Set store active"}
                          checked={get(this.myStore.data,'is_active')}
                          onCheck={() => this.changeSetting('is_active')}
                        />
                      </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>
                <div style={{textAlign: "right"}}>
                  <RaisedButton label="Save" primary={true} style={{margin: "12px 0px"}} onClick={this.save}/>
                </div>
        </div>
      </div>
    )
  }
}
