import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import { Modal, Button, Alert, Select } from 'antd';
import './style.scss';
import { Route } from 'react-router-dom'
import {LINKS} from "../../../routes";

const Option = Select.Option;
@inject('appstate')
@observer
export default class ModalVouchersComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      selectedOption: '0 Points'
    };
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {}

  render() {
    const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;

    return (
      <Modal
        title={title}
        visible={isVisible}
        onOk={onOk}
        onCancel={onCancel}
        footer={null}
        bodyStyle={{
          padding: 0,
          margin: 0,
          display: 'flex',
          flexDirection: 'row',
        }}
        style={{
          minWidth: '50vw'
        }}
      >
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: data.background_color || '#aaa',
          // height: 500,
          flex: 0.3
        }}>
          <img className={'imageModal'} src={data.image} />
          <p className={'titleModal'}>{data.name}</p>
        </div>
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          flex: 0.7,
          padding: 30
        }}>
          <p className={'descriptionModal'} >{data.description}</p>

          {(data.additional_information.length > 0) && <Alert className={'informationAlertModal'} message={
            <div className={'informationContainerModal'}>
              <p className={'informationTitleModal'}>Information</p>
              <p className={'informationBodyModal'}>{data.additional_information}</p>
            </div>
          } type="success" />}

          <Select
            showSearch
            className={'optionSelectModal'}
            placeholder="Please Select your Option"
            optionFilterProp="children"
            onChange={(e) => this.setState({selectedOption: e})}
            // filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {data.option.map((item, index) => {
              return <Option value={item.cost}>{item.value}</Option>
            })}
          </Select>

          <div className={'costContainerModal'}>
            <div className={'costLeftPaneModal'}>
              <p className={'costTitleModal'}>Cost</p>
              <p className={'costValueModal'}>{this.state.selectedOption}</p>
            </div>
            <div className={'costRightPaneModal'}>
              <Route render={({ history}) => (
                <Button onClick={() => history.push(LINKS.VERIFY_VOUCHERS)}  type="primary" size={"large"} block>Buy</Button>
              )} />
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}
