import React from 'react';
import {inject, observer} from 'mobx-react';
import {Card, CardHeader, CardText, Divider, Toggle,} from 'material-ui';

@inject('appstate')
@observer
export class CardDelivery extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);

    this.myStore = props.appstate.myStore;
    this.myStoreShippingMethod = props.appstate.myStoreShippingMethod;

  }

  componentDidMount() {
    console.log('CardDelivery loaded!')
  }

  updateShippingMethod(v) {
    if (v) {
      this.myStoreShippingMethod.create({shipping_method_id: this.props.data.id});
    } else {
      this.myStoreShippingMethod.delete(this.props.data.id);
    }
  }

  render() {
    const {data={}} = this.props;
    return (
      <Card className="marketplace-cardLite cardDashboard marketplace-card-delivery">
        <CardHeader
          title={data.name}
          actAsExpander={true}
          showExpandableButton={true}
        />
        <CardText expandable={true}>
          <Divider/>
          <div className='row'>
            <div className='col s8' style={{paddingTop: 15}}>
              <div className='left-section'>
                {data.description}
              </div>
            </div>
            <div className='col s4' style={{paddingTop: 15}}>
              <div className='right-section'>
                <div className='row'>
                  <div className='col s9' style={{textAlign: 'left'}}>
                    <p className='text-delivery'>
                      Activate this Delivery Service
                    </p>
                  </div>
                  <div className='col s3' style={{textAlign: 'right'}}>
                    <Toggle
                      toggled={this.myStoreShippingMethod.isActivated(data.id)}
                      disabled={this.myStoreShippingMethod.isLoading}
                      onToggle={(e, checked) => this.updateShippingMethod(checked)}
                      className='toggle-delivery'/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardText>
      </Card>
    )
  }
}
