import React from 'react';
import {inject, observer} from 'mobx-react';
import {
    FlatButton
} from 'material-ui';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, TimePicker, List, Popconfirm, InputNumber, Input} from 'antd';
import {startCase} from 'lodash';
import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
// import './style.scss';
import {DIALOG} from "../../stores/global_ui";
import EmptyComponent from '../EmptyComponent';
import DeleteIcon from 'material-ui/svg-icons/action/delete';
import Search from 'material-ui/svg-icons/action/search';

const format = 'HH:mm';



@inject('appstate')
@observer
export default class CartDetail extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      valueMinimal: 0,
      valueMaximal: 0,
      changeSearch:false,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {

  }

  handleChangeMinimal = (valueMinimal) => {
    this.setState({ valueMinimal });
  };

  handleChangeMaximal = (valueMaximal) => {
    this.setState({ valueMaximal });
  };

  handleBlur = () => {
    console.log('blur');
  }

  handleFocus = () => {
    console.log('focus');
  }

  handleChangeSearch = () => {
    this.setState({
        changeSearch : true
    })
  }

  handleChangeSearchFalse = () => {
    this.setState({
        changeSearch : false
    })
  }

  

  render() {
    const { valueMinimal, valueMaximal } = this.state;

    const dataAgya = [
        'Full to full gasoline',
        '4 people',
        '4 door',
      ];

      const dataAvanza = [
        'Full to full gasoline',
        '4 people',
        '5 door',
      ];

      const dataInova = [
        'Full to full gasoline',
        '6 people',
        '4 door',
      ];

    return (
      <div className="wallet containerMiddle">
        <div className="row">
          <div className="col s9 m9 l9">
            <Row>
                <Card style={{marginRight:20,marginBottom:20}}>
                    <Row>
                        <div style={{display: 'flex',justifyContent:'space-between'}}>
                            <Checkbox style={{}} defaultChecked  value="">Pilih Semua Product</Checkbox>
                            <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                                <Button shape="circle" icon="delete" type="danger"/>
                            </Popconfirm>
                        </div>
                    </Row>
                </Card>
            </Row>
            <Row>
              <Card
                title={<div style={{display:'flex',justifyContent:'space-between'}}>
                <div>
                    <Checkbox style={{}} defaultChecked  value="">Pilih</Checkbox>
                </div> 
                <div>
                    <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                        <Button shape="circle" icon="heart" style={{marginRight:10}} />
                    </Popconfirm>
                    <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                        <Button shape="circle" icon="delete"  type="danger"/>
                    </Popconfirm>
                </div>
            </div>}
                  style={{marginRight:20,marginBottom:20}}
              >
                  <Row>
                      <Col span={6}>
                          <img alt="example" src="https://ecs7.tokopedia.net/img/cache/700/product-1/2018/8/10/5295084/5295084_a24f6220-7806-4854-a42e-3256db020ae8_700_700.jpg" style={{width:125, height:125}} />
                      </Col>
                      <Col span={1} />
                      <Col span={17}>
                            <Row>
                            <h3>Samsung Galaxy A7 2017</h3>
                            </Row>
                            <Row style={{marginBottom:10}}>
                                <h3 style={{color:'#FF6F00'}}>45,720 Points</h3>
                                <Col span={12}>
                                <div>
                                    <Input placeholder="Catatan untuk penjual" />
                                </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{display:'flex',justifyContent:'flex-end'}}>
                                        <InputNumber  defaultValue={1}  />
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                            </Row>
                      </Col>
                  </Row>
              </Card>
            </Row>

            <Row>
              <Card
                title={<div style={{display:'flex',justifyContent:'space-between'}}>
                <div>
                    <Checkbox style={{}} defaultChecked  value="">Pilih</Checkbox>
                </div> 
                <div>
                    <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                        <Button shape="circle" icon="heart" style={{marginRight:10}} />
                    </Popconfirm>
                    <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                        <Button shape="circle" icon="delete"  type="danger"/>
                    </Popconfirm>
                </div>
            </div>}
                  style={{marginRight:20,marginBottom:20}}
              >
                  <Row>
                      <Col span={6}>
                          <img alt="example" src="https://ecs7.tokopedia.net/img/cache/700/catalog/2017/11/14/17027990/17027990_64ff0394-991e-4593-816d-2985213b0bf7.jpg" style={{width:125, height:125}} />
                      </Col>
                      <Col span={1} />
                      <Col span={17}>
                            <Row>
                            <h3>Samsung Galaxy S8</h3>
                            </Row>
                            <Row style={{marginBottom:10}}>
                                <h3 style={{color:'#FF6F00'}}>99,643 Points</h3>
                                <Col span={12}>
                                <div>
                                    <Input placeholder="Catatan untuk penjual" />
                                </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{display:'flex',justifyContent:'flex-end'}}>
                                        <InputNumber  defaultValue={1}  />
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                            </Row>
                      </Col>
                  </Row>
              </Card>
            </Row>

            <Row>
              <Card
                title={<div style={{display:'flex',justifyContent:'space-between'}}>
                <div>
                    <Checkbox style={{}} defaultChecked  value="">Pilih</Checkbox>
                </div> 
                <div>
                    <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                        <Button shape="circle" icon="heart" style={{marginRight:10}} />
                    </Popconfirm>
                    <Popconfirm title="Are you sure delete this task?"  okText="Yes" cancelText="No">
                        <Button shape="circle" icon="delete"  type="danger"/>
                    </Popconfirm>
                </div>
            </div>}
                  style={{marginRight:20,marginBottom:20}}
              >
                  <Row>
                      <Col span={6}>
                          <img alt="example" src="https://ecs7.tokopedia.net/img/cache/700/product-1/2017/9/12/21419306/21419306_c32decb4-59b9-4b2c-ac39-2a6aa5a91ff2_940_620.jpg" style={{width:125, height:125}} />
                      </Col>
                      <Col span={1} />
                      <Col span={17}>
                            <Row>
                            <h3>LG LED Smart TV 49UJ652T</h3>
                            </Row>
                            <Row style={{marginBottom:10}}>
                                <h3 style={{color:'#FF6F00'}}>145,740 Points</h3>
                                <Col span={12}>
                                <div>
                                    <Input placeholder="Catatan untuk penjual" />
                                </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{display:'flex',justifyContent:'flex-end'}}>
                                        <InputNumber  defaultValue={1}  />
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                            </Row>
                      </Col>
                  </Row>
              </Card>
            </Row>
          </div>
          <div className="col l3 m3 s3 no-padding">
            <Affix offsetTop={90}>
              <Card title="Ringkasan Belanja" bordered={true} style={{ width: '100%' }}>
                <div style={{display: 'flex',justifyContent:'space-between'}}>
                    <p>Total Poin</p>
                    <p>291,103 Poin</p>
                </div>
                <Divider />
                <Button type="primary" block style={{}}>Check out (3)</Button>
              </Card>
              </Affix>
          </div>
        </div>


      </div>
    )
  }
}
