import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Card,
  CardHeader,
  CardText,
  Dialog,
  Divider,
  FlatButton,
  IconButton,
  RaisedButton,
  TextField,
  Toggle,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
} from 'material-ui';
import {Icon} from 'antd';
import './style.scss';
import {CardDelivery} from "./CardDelivery";

@inject('appstate')
@observer
export default class DeliveryComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      open: false
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;

    this.shippingMethod = props.appstate.shippingMethod;
    this.myStoreShippingMethod = props.appstate.myStoreShippingMethod;
  }

  componentDidMount() {
    this.shippingMethod.getAll();
    this.myStoreShippingMethod.getAll();
  }

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label="Update"
        primary={true}
        onClick={this.handleClose}
      />,
    ];

    return (
      <div className='store-delivery'>
        <div className="row">
          <div className="col l12 m12 s12">
            <Card className="animated fadeIn marketplace-cardLite">
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Delivery Service'}/>
                </ToolbarGroup>
                {/* <ToolbarGroup className="ToolbarGroupLast">
                <ToolbarSeparator/>
                <Link to={LINKS.USER}>
                  <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
                </Link>
              </ToolbarGroup> */}
              </Toolbar>
              <Divider/>
              <div style={{padding: 20}}>
              <span className='delivery-description'>
                With Our Supported Send Services, Buyers will be updated on their package tracking.
              </span>
              </div>
            </Card>

            <div className='row' style={{marginTop: 25}}>
              {this.shippingMethod.data.map(sm => {
                return <CardDelivery key={sm.id} data={sm}/>
              })}
            </div>
            <Card className="marketplace-cardLite cardDashboard " style={{marginTop: 25}}>
              <Toolbar className="radius4" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <CardHeader
                    title="Sent in"
                    subtitle="Change the number of days 'Sent in' for all products in your store."
                    avatar={<Icon type="calendar" style={{fontSize: 25, color: '#555'}}/>}
                    style={{marginLeft: -15}}
                  />
                </ToolbarGroup>
                <ToolbarGroup className="ToolbarGroupLast">
                  {/* <ToolbarSeparator/> */}
                  {/* <Button onClick={() => this.handleOpen()}>Edit</Button> */}
                  <RaisedButton onClick={() => this.handleOpen()} label="Edit"/>
                </ToolbarGroup>
              </Toolbar>
            </Card>
          </div>


          <Dialog
            title={
              <div className="row">
                <div className="col s11">
                  <p style={{fontSize: 20, color: '#000'}}>
                    Mass Update "Sent in"
                  </p>
                </div>
                <div className="col s1">
                  <IconButton
                    iconClassName="material-icons"
                    tooltip="Close"
                    onClick={() => this.handleClose()}
                    style={{marginTop: -5}}
                  >
                    close
                  </IconButton>
                </div>
              </div>
            }
            actions={actions}
            modal={true}
            open={this.state.open}
            onRequestClose={this.handleClose}
            autoScrollBodyContent={true}
          >
            <div style={{paddingLeft: 16, paddingRight: 16}}>
              <div className="row">
                The features below can be used to change the amount of time "Sent in" for all products in your store.
                You can change the "Sent in" time for 3 days for ready stock product or more than 7 days
                for products with Pre-Order status.
              </div>
              <div className="row">
                <p className="label-form" style={{marginBottom: -4}}>Sent in</p>
                <TextField
                  hintText="in days"
                  defaultValue={`3`}
                  fullWidth={true}
                  onChange={(event) => console.log(event.target.value)}
                />
              </div>
            </div>
          </Dialog>
        </div>

      </div>
    )
  }
}
