import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {Affix, Card, Slider, Select, Col, Row } from 'antd';
import {Tab, Tabs} from 'material-ui';
import './style.scss';
import {ItemCard} from "./ItemCard";
import ModalVouchersComponent from "./Modal";
import EmptyComponent from '../EmptyComponent';

const Option = Select.Option;
@inject('appstate')
@observer
export default class VouchersComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      isOpened: false,
      data: {
        name: '',
        background_color_1:'',
        background_color_2:'',
        images: {
          logo:''
        },
        description: '',
        additional_data: {
          information:''
        },
        // option: [
        //   {
        //     value: '',
        //     cost: ''
        //   },
        // ],
        sku: [
          {
            id:'',
            name: '',
            price: ''
          },
        ]
      },
    };
    this.defaultState = Object.assign({}, this.state);
    this.vouchersStore = props.appstate.vouchers;
  }

  componentDidMount() {
    this.vouchersStore.getList();
    console.log('res list component',this.vouchersStore.getList())
  }

  render() {

    return (
      <div className="voucher">
        <div className="row">
          <div className="col l12 m12 s12 padding">
            <p className={'pageTitle'}>
              Voucher & Gift Card
            </p>

            <Row gutter={10}>
              {
                ( this.vouchersStore.list.length > 0) ?
                this.vouchersStore.list.map((item, index) => {
                  return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
                    <ItemCard data={item}/>
                  </Col>)
                })
                : (
                  <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
                )
              }


              {/* {
                (data.length > 0) ?
                data.map((item, index) => {
                  return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
                    <ItemCard data={item}/>
                  </Col>)
                })
                : (
                  <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
                )
              } */}
            </Row>

            {this.state.isOpened && (
              <ModalVouchersComponent
                title={this.state.data.name+' Vouchers'}
                data={this.state.data}
                isVisible={this.state.isOpened}
                onOk={() => this.setState({isOpened: false})}
                onCancel={() => this.setState({isOpened: false})}
              />
            )}


          </div>
        </div>
      </div>
    )
  }
}