import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  MenuItem,
  ToolbarGroup,
  IconButton,
  ToolbarTitle,
  Dialog,
  Toggle
} from 'material-ui';
import SaveIcon from 'material-ui/svg-icons/content/save';
import DeleteIcon from 'material-ui/svg-icons/action/delete';
import AddIcon from 'material-ui/svg-icons/content/add';
import { Upload, Icon, Modal, Input, Select, Switch, message, Button as ButtonAntd } from 'antd';
import '../style.scss';
import {LINKS} from "../../../routes";
import uuid from 'uuid';
import {appConfig} from "../../../config/app";
import NumberFormat from 'react-number-format';

const InputGroup = Input.Group;
const { TextArea } = Input;
const Option = Select.Option;

@inject('appstate')
@observer
export default class FormPromotion extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.rewardStore = props.appstate.reward;
    this.state = {
      openedDialog: false,
      openDeleteDialog : false,
      value: 1,
      searchText: '',
      slideIndex: 0,
      openedDialogBack: false,
      reward_type: "Choose Reward Type",
      expanded: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      fileLength: 0,
      fileMainExist: false,
      formData: {
        custom_fields: []
      },
      viewOnly : false,
      mode: 'create',
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.userData = props.appstate.userData;
    this.globalUI = props.appstate.globalUI;
    this.categoryStore = props.appstate.category;
    this.itemStore = props.appstate.item;
    this.myStoreItem = props.appstate.myStoreItem;
    this.userData = props.appstate.userData;
  }

  async componentDidMount() {
    console.log('ini promotion')
    if(this.userData.role === 'store' && !this.userData.entity_permission.can_store_change_item){
      this.setState({viewOnly : true})
    }

    this.categoryStore.getCategoryList();
    if(this.props.match.params.id){
      this.globalUI.showDialogLoading();
      await this.itemStore.getDetail(this.props.match.params.id);
      let data = {};
      if(typeof this.itemStore.selectedData.data[0].custom_fields === 'object'){
        data = Object.assign(this.itemStore.selectedData.data[0], {custom_fields: []});
      }else {
        data = Object.assign(this.itemStore.selectedData.data[0], {});
      }
      this.setState({formData: data});
      console.log("DATA",data);
      let images = [];
      if(!data.images.main && data.images.gallery.length == 0){
        console.log('no main images');
        this.setState({fileMainExist: false, fileLength: 0});
      }else if(data.images.gallery.length == 0){
        this.setState({fileMainExist: true, fileLength: 2});
        const name = data.images.main.split('/')[2];
        const fileName = name.split('.')[0];
        images.push(
          {
            uid: name,
            name: fileName,
            status: 'done',
            url: appConfig.imageUrl+data.images.main,
            path: data.images.main,
            type: 'main'
          }
        );
      }else{
        this.setState({fileMainExist: true, fileLength: 1+data.images.gallery.length});
        const name = data.images.main.split('/')[2];
        const fileName = name.split('.')[0];
        images.push(
          {
            uid: name,
            name: fileName,
            status: 'done',
            url: appConfig.imageUrl+data.images.main,
            path: data.images.main,
            type: 'main'
          }
        );

        data.images.gallery.map(item => {
          const name = item.split('/')[2];
          const fileName = name.split('.')[0];
          if(item == data.images.main){
            return;
          }
          images.push(
            {
              uid: name,
              name: fileName,
              status: 'done',
              url: appConfig.imageUrl+item,
              path: item,
              type: 'gallery'
            }
          );
        });
      }
      this.setState({fileList: images, mode: 'edit'});
      console.log(this.state.fileList);
      console.log("fileLength",this.state.fileLength);
      console.log("fileMainExist",this.state.fileMainExist);
    }else{
      this.setState({fileList: this.itemStore.listImages});
      console.log(this.state.fileList.slice(), 'asd');
    }
    console.log(this.state.mode, 'mode')
  }

  handleCancel = () => this.setState({ previewVisible: false });


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

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

  postData = () => {
    console.log("ngepost");
    this.setState({openedDialog: false});

    const data = Object.assign({
      user_store_id: this.props.id
    }, this.state.formData);

    if (this.state.fileList.length > 0) {
      data.images = {
        main: this.state.fileList[0].path,
        gallery: this.state.fileList.filter((it, index) => index !== 0).map(f => f.path)
      };
    }else{
      data.images = {
        gallery : []
      }
    }

    const custom_fields = this.state.formData.custom_fields.reduce((cf, c) => {

      cf[c.label] = c.value;

      return cf;
    }, {});

    data.custom_fields = custom_fields;
    console.log(data, 'data post');
    if(this.userData.role == 'store') {
      this.itemStore.create(data)
        .then(async () => {
          await message.success('Success Added New Item');
          await this.myStoreItem.getAll();
          this.props.history.push(LINKS.ITEMS);
        });
    }
    else if(this.userData.role == 'administrator'){
      this.itemStore.create(data)
        .then(async () => {
          await message.success('Success Added New Item');
          await this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
          await this.myStoreItem.getAll();
          this.props.history.push(`${LINKS.STORES_LIST}/${this.props.id}`);
        });
    }
  };

  deleteData = () => {
    this.itemStore.delete(this.props.match.params.id)
      .then(async () => {
        await message.success('Success Delete The Item');
        if(this.userData.role === 'store') {
          await this.myStoreItem.getAll();
          this.props.history.push(LINKS.ITEMS);
        }
        else if(this.userData.role === 'administrator'){
          await this.myStoreItem.setRequestQuery({user_store_id : this.itemStore.selectedData.data[0].user_store_id});
          await this.myStoreItem.getAll();
          this.props.history.goBack();
          //this.props.history.push(`${LINKS.STORES_LIST}/${this.itemStore.selectedData.data[0].user_store_id}`);
        }

      });
  };

  editData = () => {
    console.log("fileList",this.state.fileList);
    console.log("editData");
    this.setState({openedDialog: false});

    const data = Object.assign({}, this.state.formData);


    if (this.state.fileList.length > 0) {
      let imageGallery= this.state.fileList.filter(f=>f.type!=='main').map(f=>f.path);

      //if gallery empty insert main image for gallery
      if(imageGallery.length == 0){
        imageGallery = this.state.fileList.filter(f=>f.type=='main').map(f=>f.path);
      }

      data.images = {
        main: this.state.fileList[0].path,
        gallery: imageGallery
      }
    }
    else if(this.state.fileList.length == 0){
      data.images = {
        gallery : []
      }
    }

    const custom_fields = this.state.formData.custom_fields.reduce((cf, c) => {

      cf[c.label] = c.value;

      return cf;
    }, {});

    data.custom_fields = custom_fields;
    delete data.id;
    console.log("data mau diedit",data);

    this.itemStore.update(this.props.match.params.id, data)
      .then(async () => {
        await message.success('Success Edited The Item');
        if(this.userData.role === 'store'){
          await this.myStoreItem.getAll();
          this.props.history.push(LINKS.ITEMS);
        }
        else if(this.userData.role === 'administrator'){
          await this.myStoreItem.setRequestQuery({user_store_id : this.itemStore.selectedData.data[0].user_store_id});
          await this.myStoreItem.getAll();
          // this.props.history.push(`${LINKS.STORES_LIST}/${this.itemStore.selectedData.data[0].user_store_id}`);
          this.props.history.goBack();
        }

      });
  };

  handleBackClose = () => {
    this.setState({openedDialogBack: false})
  };

  handleBackOpen = () => {
    this.setState({openedDialogBack: true});
  };

  triggerOnChange() {

  }
  handleChange = ({ fileList }) => {this.setState({ fileList }); console.log(fileList, 'remove')};

  handleMin = () => {
    console.log(this.state.formData);
  }
  uploaderHandler({file, onProgress}) {
    console.log(file, 'upload');
    console.log("fileLength", this.state.fileLength);
    console.log("fileMainExist", this.state.fileMainExist);
    this.http.upload(file)
      .then(res => {
        const {fileList} = this.state;
        let newFileList = fileList.filter((obj)=>{
          if(!obj.lastModified){
            return true;
          }

        })
        if(!this.state.fileMainExist){
          newFileList.push({
            uid: newFileList.length,
            name: file.name,
            status: 'done',
            url: this.http.appendImagePath(res.path),
            path: res.path,
            type: 'main'
          });
        }
        else{
          newFileList.push({
            uid: newFileList.length,
            name: file.name,
            status: 'done',
            url: this.http.appendImagePath(res.path),
            path: res.path,
            type: 'gallery'
          });
        }

        console.log("update fileList",fileList);
        console.log("new fileList",newFileList);
        this.setState({fileList : newFileList});
      })


  }

  addCustomField() {
    const {custom_fields} = this.state.formData;

    custom_fields.push({
      id: uuid.v4(),
      label: 'label-'+custom_fields.length,
      value: '',
    });

    this.setState({
      formData: {
        ...this.state.formData,
        custom_fields
      }
    })
  }

  removeCustomField(index){
    const {custom_fields} = this.state.formData;

    custom_fields.splice(index,1);
    this.setState({
      formData: {
        ...this.state.formData,
        custom_fields
      }
    })
  }

  changeCustomFieldLabel(i, v) {
    const {custom_fields} = this.state.formData;

    custom_fields[i].label = v;

    this.setState({
      formData: {
        ...this.state.formData,
        custom_fields
      }
    })
  }

  changeCustomFieldValue(i, v) {
    const {custom_fields} = this.state.formData;

    custom_fields[i].value = v;

    this.setState({
      formData: {
        ...this.state.formData,
        custom_fields
      }
    })
  };

  handleWarningDialog = (bool)=>{
    this.setState({
      openDeleteDialog : bool
    })
  }

  render() {

    const { previewVisible, previewImage, fileList } = this.state;

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label={(this.props.id ?  "Input" :  "Edit")}
        primary={true}
        disabled={this.itemStore.isLoading}
        onClick={(this.props.id ?  this.postData :  this.editData) }
      />,
    ];

    const actionsDelete = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={()=>this.handleWarningDialog(false)}
      />,
      <RaisedButton
        label={"Delete"}
        primary={true}
        disabled={this.itemStore.isLoading}
        onClick={this.deleteData}
      />,
    ];

    const actionsBack = [
      <FlatButton
        label="No"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleBackClose}
      />,
      <RaisedButton
        label="Yes"
        primary={true}
        onClick={() => this.props.history.goBack()}
      />,
    ];

    const wrapperText = key => ele => React.cloneElement(ele, {
      value: this.state.formData[key],
      onChange: (e) => {
        if(key === "regular_price"){
          if(e.target.value.indexOf("-") > -1){
            this.setState({
              formData: {
                ...this.state.formData,
                [key]: 0,
              }
            }, () => this.triggerOnChange());
          }
          else{
            this.setState({
              formData: {
                ...this.state.formData,
                [key]: parseInt(e.target.value.replace(/\,/g,''),10),
              }
            }, () => this.triggerOnChange());
          }
        }
        else if(key === "stock"){
          if(e.target.value.indexOf("-") > -1){
            this.setState({
              formData: {
                ...this.state.formData,
                [key]: 0,
              }
            }, () => this.triggerOnChange());
          }
          else if(e.target.value.slice(-1) === "," || e.target.value.slice(-1) === "." || e.target.value.slice(-1) === "-"){
            //do nothing
          }
          else{
            this.setState({
              formData: {
                ...this.state.formData,
                [key]: e.target.value,
              }
            }, () => this.triggerOnChange());
          }
        }
        else if(key === "weight"){
          if(e.target.value.slice(-1) === "," || e.target.value.slice(-1) === "." || e.target.value.slice(-1) === "-"){
            //do nothing
          }
          else{
            this.setState({
              formData: {
                ...this.state.formData,
                [key]: e.target.value,
              }
            }, () => this.triggerOnChange());
          }
        }
        else{
          this.setState({
            formData: {
              ...this.state.formData,
              [key]: e.target.value,
            }
          }, () => this.triggerOnChange());
        }

        console.log("value",this.state.formData[key]);
        console.log("value2",e.target.value);
        console.log("key",key);
      }
    });

    const wrapperSelect = key => ele => React.cloneElement(ele, {
      value: this.state.formData[key],
      onChange: (e, k, v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: e,
          }
        }, () => this.triggerOnChange());
      }
    });

    const wrapperToggle = key => ele => React.cloneElement(ele, {
      checked: this.state.formData[key],
      onChange: (e) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: e,
          }
        }, () => this.triggerOnChange());
      }
    });

    return (

      <div style={{marginTop: 35}}>
        <div className="row">
          <div className="col s12">
            <Card className="animated fadeIn cardLite" style={{marginLeft: 12, marginRight: 12}}>
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <IconButton
                    iconClassName="material-icons"
                    tooltip="Back"
                    style={{marginLeft: '-10px'}}
                    onClick={this.handleBackOpen}
                  >
                    arrow_back
                  </IconButton>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Promotion\'s Detail '}/>
                </ToolbarGroup>
                {
                  (this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item || this.userData.role === 'administrator' ) &&
                  <ToolbarGroup>
                    {/*<Button>Submit</Button>*/}
                    {(this.userData.role === 'store' ? this.props.match.params.id ? <RaisedButton onClick={()=>this.handleWarningDialog(true)} icon={<DeleteIcon/>} label="Delete" primary={true} style={{marginRight : '1px'}}/> : '' : this.props.id ?  '' : <RaisedButton onClick={()=>this.handleWarningDialog(true)} icon={<DeleteIcon/>} label="Delete" primary={true} style={{marginRight : '1px'}}/> ) }
                    <RaisedButton onClick={this.handleOpen} icon={<SaveIcon/>} label="Save" primary={true} />
                  </ToolbarGroup>
                }

              </Toolbar>
            </Card>
          </div>
        </div>
        <div className={"row"}>
          <div className={"col s12"}>
            <div className="row">
              <div className={"col s7"}>
                <Card className="animated fadeIn cardLite">
                  <div style={{padding: '14px'}}>
                    <div className="row">
                      <div className="row">
                        <h2 className='photo-title'>
                          Information
                        </h2>
                      </div>
                      <Divider style={{marginBottom: 20}}/>
                      <div className="row">
                        <div className="col m6 l6">
                          <p className="label-form">Name</p>
                          {wrapperText("name")(
                            <Input disabled={this.state.viewOnly} placeholder="E.g. Radio" autosize />
                          )}
                        </div>
                        <div className="col m6 l6">
                          <p className="label-form">Category</p>
                          {/*{wrapperSelect("category_id")(*/}
                            {/*<Select disabled={this.state.viewOnly} style={{width: '100%',overflow: 'scroll'}}>*/}
                              {/*{this.categoryStore.categoryList.map(c => {*/}
                                {/*return <Option key={c.id} value={c.id}>{c.name}</Option>*/}
                              {/*})}*/}
                            {/*</Select>*/}
                          {/*)}*/}
                          <Select defaultValue="Promotion" style={{width: '100%',overflow: 'scroll'}} disabled>
                            <Option value="Promotion">Promotion</Option>
                          </Select>
                        </div>
                      </div>
                      <div className="row">
                        <div className="col m12 l12">
                          <p className="label-form">Description</p>
                          {wrapperText("description")(
                            <TextArea disabled={this.state.viewOnly} placeholder="E.g. Radio 1993, sony from Japan" autosize />
                          )}
                        </div>
                      </div>
                    </div>

                    <div className="row">
                      <div className="row">
                        <h2 className='photo-title'>
                          Other Options
                        </h2>
                      </div>
                      <Divider style={{marginBottom: 20}}/>
                      <div className="row">
                        <div className="col m12 l12">
                          <div className={"row"}>
                            <div className={"col s6"}>
                              <p className="label-form">Pre-Order</p>
                            </div>
                            <div className={"col s6"} style={{textAlign: 'right'}}>
                              {wrapperToggle("preorder")(
                                <Switch disabled={this.state.viewOnly} checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="col m12 l12">
                          <div className={"row"}>
                            <div className={"col s6"}>
                              <p className="label-form">Use Weight as Stock</p>
                            </div>
                            <div className={"col s6"} style={{textAlign: 'right'}}>
                              {wrapperToggle("use_weight_as_stock")(
                                <Switch disabled={this.state.viewOnly} checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="col m12 l12">
                          <div className={"row"}>
                            <div className={"col s6"}>
                              <p className="label-form">Active</p>
                            </div>
                            <div className={"col s6"} style={{textAlign: 'right'}}>
                              {wrapperToggle("visible")(
                                <Switch disabled={this.state.viewOnly} checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                      {/* <div className="row">
                        <div className="col m6 l6">
                        <p className="label-form">Condition</p>
                        <SelectField
                          value={this.state.selectedType}
                          onChange={this.handleChangeType}
                          fullWidth={true}
                        >
                          <MenuItem value={1} primaryText="Never" />
                          <MenuItem value={2} primaryText="Every Night" />
                          <MenuItem value={3} primaryText="Weeknights" />
                          <MenuItem value={4} primaryText="Weekends" />
                          <MenuItem value={5} primaryText="Weekly" />
                        </SelectField>
                        </div>
                      </div> */}
                      {/* <div className="row">
                        <div className="col m6 l6">
                        <p className="label-form">SKU-Induk</p>
                        <TextField
                          hintText=""
                          fullWidth={true}
                          onChange={this.handleReward}
                        />
                        </div>
                      </div> */}
                    </div>

                    <div className="row">
                      <div className="row">
                        <h2 className='photo-title'>
                          Meta Data
                        </h2>
                      </div>
                      <Divider style={{marginBottom: 20}}/>
                      {!this.state.viewOnly && <div className={"row"}>
                        <FlatButton
                          className="ToolbarGroupLastButton"
                          icon={<AddIcon/>}
                          label="Add Metadata"
                          primary={true}
                          onClick={() => this.addCustomField()}/>
                      </div>}

                      {this.state.formData.custom_fields.map((cf, i) => {
                        return (
                          <div key={cf.id} className="row">
                            <div className="col m5 l5">
                              {/* <p className="label-form">Label</p> */}
                              <Input placeholder={`label-${i}`} autosize />
                              {/*<TextField*/}
                              {/*hintText="Label"*/}
                              {/*defaultValue={`label-${i}`}*/}
                              {/*fullWidth={true}*/}
                              {/*onChange={(e,v) => this.changeCustomFieldLabel(i, v)}*/}
                              {/*/>*/}
                            </div>
                            <div className="col m5 l5">
                              {/* <p className="label-form">Value</p> */}
                              <Input placeholder={`Value`} autosize />
                              {/*<TextField*/}
                              {/*hintText="Value"*/}
                              {/*fullWidth={true}*/}
                              {/*onChange={(e,v) => this.changeCustomFieldValue(i, v)}*/}
                              {/*/>*/}
                            </div>
                            <div className="col m2 l">
                              {
                                !this.state.viewOnly && <ButtonAntd shape="circle" icon="delete" onClick={()=>this.removeCustomField(i)}/>
                              }

                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </Card>
              </div>
              <div className={"col s5"}>
                <Card className="animated fadeIn cardLite">
                  <div style={{padding: '14px'}}>
                    <div className="row">
                      <div className="row">
                        <h2 className='photo-title'>
                          Galleries
                        </h2>
                      </div>
                      <Divider style={{marginBottom: 20}}/>
                      <div className="row">
                        <div className="col s12">
                          <Upload
                            listType="picture-card"
                            fileList={fileList}
                            customRequest={(...args) => this.uploaderHandler(...args)}
                            style={{}}
                            onChange={this.handleChange}
                          >
                            {fileList.length >= 9 || this.state.viewOnly ? null : uploadButton}
                          </Upload>
                          <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                            <img alt="example" style={{ width: '100%' }} src={previewImage} />
                          </Modal>
                        </div>
                      </div>
                    </div>

                    <div className="row">
                      <div className="row">
                        <h2 className='photo-title'>
                          Stock and Pricing
                        </h2>
                      </div>
                      <Divider style={{marginBottom: 20}}/>
                      <div className="row">
                        <div className="col m6 l6">
                          <p className="label-form">Price</p>
                          <InputGroup compact>
                            <Input style={{ width: '30%' }} defaultValue="Rp. " disabled={true}/>
                            {wrapperText("regular_price")(
                              <NumberFormat thousandSeparator={true} disabled={this.state.viewOnly} style={{ width: '70%', padding: '4px 11px', height: '32px', fontSize: '14px', border: '1px solid #d9d9d9', borderRadius: '4px' }} placeholder="E.g. 50000" />
                            )}
                          </InputGroup>
                        </div>
                        <div className="col m6 l6">
                          <p className="label-form">Stock</p>
                          {wrapperText("stock")(
                            <Input placeholder="E.g. 50" onChange={this.handleMin} disabled={this.state.viewOnly} />
                          )}
                        </div>
                      </div>

                      <div className="row">
                        <div className="row">
                          <h2 className='photo-title'>
                            Delivery Services
                          </h2>
                        </div>
                        <Divider style={{marginBottom: 20}}/>
                        <div className="row">
                          <div className="col m6 l6">
                            <p className="label-form">Weight</p>
                            <InputGroup compact>
                              {wrapperText("weight")(
                                <Input style={{ width: '65%' }} disabled={this.state.viewOnly} placeholder="E.g. 5" />
                              )}
                              <Input style={{ width: '35%' }} defaultValue="Gram" disabled={true}/>
                            </InputGroup>
                          </div>
                        </div>

                        {false && (
                          <div className="row">
                            <div className="col m12 l12">
                              <p className="label-form">Shipping Charges</p>
                              <div className='col s8' style={{paddingTop: 15}}>
                                <div className='left-section'>
                                  J&T Express (maks 50000gr)
                                </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'>
                                        Rp120.000
                                      </p>
                                    </div>
                                    <div className='col s3' style={{textAlign: 'right'}}>
                                      <Toggle className='toggle-delivery' />
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div className='col s8' style={{paddingTop: 15}}>
                                <div className='left-section'>
                                  JNE REG(maks 50000gr)
                                </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'>
                                        Rp108.000
                                      </p>
                                    </div>
                                    <div className='col s3' style={{textAlign: 'right'}}>
                                      <Toggle className='toggle-delivery' />
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div className='col s8' style={{paddingTop: 15}}>
                                <div className='left-section'>
                                  JNE OKE(maks 50000gr)
                                </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'>
                                        Rp96.000
                                      </p>
                                    </div>
                                    <div className='col s3' style={{textAlign: 'right'}}>
                                      <Toggle className='toggle-delivery' />
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div className='col s8' style={{paddingTop: 15}}>
                                <div className='left-section'>
                                  Pos Kilat Khusus(maks 50000gr)
                                </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'>
                                        Rp102.000
                                      </p>
                                    </div>
                                    <div className='col s3' style={{textAlign: 'right'}}>
                                      <Toggle className='toggle-delivery' />
                                    </div>
                                  </div>
                                </div>
                              </div>


                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                    {/*<div className="row">*/}
                    {/*<div className='col s12' style={{textAlign: "right"}}>*/}
                    {/*<RaisedButton label="Save" onClick={this.handleOpen} primary={true} style={{marginTop: '2.3em'}}/>*/}
                    {/*</div>*/}
                    {/*</div>*/}
                  </div>
                </Card>
              </div>
            </div>

            <Dialog
              title="Warning"
              actions={actions}
              modal={true}
              open={this.state.openedDialog}
              onRequestClose={() => this.handleClose()}
            >
              Make sure all of your data is correct before submitting.
            </Dialog>
            <Dialog
              title="Warning"
              actions={actionsBack}
              modal={true}
              contentStyle={{width: 350}}
              open={this.state.openedDialogBack}
              onRequestClose={() => this.handleBackClose()}
            >
              Are you sure you wanna go back ?
            </Dialog>

            <Dialog
              title="Warning"
              actions={actionsDelete}
              modal={true}
              open={this.state.openDeleteDialog}
              onRequestClose={() => this.handleWarningDialog(false)}
            >
              Are you sure want to delete this item?
            </Dialog>
          </div>
        </div>
      </div>
    )
  }
}
