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";

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: '',
        image: '',
        description: '',
        additional_information: '',
        background_color: '',
        option: [
          {
            value: '',
            cost: ''
          },
        ]
      },
    };
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {
  }

  render() {
    const data = [
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
      {
        name: 'KFC',
        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
        option: [
          {
            value: 'Rp. 50.000',
            cost: '50 Points'
          },
          {
            value: 'Rp. 100.000',
            cost: '100 Points'
          },
          {
            value: 'Rp. 150.000',
            cost: '150 Points'
          },
          {
            value: 'Rp. 200.000',
            cost: '200 Points'
          },
        ]
      },
    ];

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

            <Row gutter={10}>
              {data.map((item, index) => {
                return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
                  <ItemCard data={item}/>
                </Col>)
              })}
            </Row>

            <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>
    )
  }
}