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

const Option = Select.Option;

@withRouter
@inject('appstate')
@observer
export default class ModalVouchersComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      selectedOption: '',
      hidden:'inline',
      skuName:'',
      skuPrice:'0',
      buttonDisbaled:true
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.vouchersStore = props.appstate.vouchers;
  }

  componentDidMount() {
    const {item} = this.props.appstate;

    item.getDetail(this.props.data.id);
  }

  render() {
    const {item} = this.props.appstate;
    const {data = {}, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
    let image = get(data, 'images.logo', '');

    if (!image.includes('http')) {
      image = this.http.appendImagePath(image);
    }

    // console.log(item.selectedData);

    const additional_data = get(data, 'additional_data', {}) || {};

    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: `linear-gradient(${data.background_color_1}, ${data.background_color_2})` || '#aaa',
          // background: data.background_color || '#aaa',
          flex: 0.3
        }}>
          <img className={'imageModal'} src={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>

          {(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
            <div className={'informationContainerModal'}>
              <p className={'informationTitleModal'}>Information</p>
              <p className={'informationBodyModal'}>{additional_data.information}</p>
            </div>
          } type="success" />}

          <Select
            showSearch
            // labelInValue
            className={'optionSelectModal'}
            placeholder="Please Select your Option"
            optionFilterProp="children"
            onChange={(value) => {
                this.setState({selectedOption: value});
                this.setState({hidden: 'none'});
                // console.log('onChange',value);
                const points = item.selectedData.sku.filter(item => item.id == value);
                this.setState({
                  skuName :points[0].name,
                  skuPrice : points[0].price,
                  buttonDisbaled:false
                })
              }
            }
            onDropdownVisibleChange={(value) => {
              this.setState({hidden: 'inline'})
            }}
          >
            {(item.selectedData.sku || []).map((item, index) => {
              // const {vouchers:[{count}]} = item;

              let count = 1;

              if (data.source === 'internal') {
                count = get(item, 'vouchers[0].count', 0) || 0;
              }
              console.log(count);
              const outOfStock = !(+count > 0);

              return (
                <Option disabled={outOfStock} value={item.id}>
                  <div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
                    <span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
                    <span style={{color:'#FF6F00', display:this.state.hidden}}>
                      Rp. <NumberFormat value={(+item.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
                    </span>
                  </div>
                </Option>
              )
            })}
          </Select>

          <div className={'costContainerModal'}>
            <div className={'costLeftPaneModal'}>
              <p className={'costTitleModal'}>Points</p>
              <p className={'costValueModal'}><NumberFormat value={(+this.state.skuPrice).toFixed(0)} displayType={'text'} thousandSeparator={true}/> </p>
            </div>
            <div className={'costRightPaneModal'}>
              <Route render={({ history}) => (
                <Button
                  onClick={() => {
                    this.vouchersStore.dataItems = data;
                    this.vouchersStore.skuId = this.state.selectedOption;
                    this.vouchersStore.skuName = this.state.skuName;
                    this.vouchersStore.skuPrice = this.state.skuPrice;
                    console.log('enak',this.state);
                    history.push(LINKS.VOUCHER_STEPPER);
                  }}
                  type="primary"
                  disabled={this.state.buttonDisbaled}
                  size={"large"}
                  block>
                  Buy
                </Button>
              )} />
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}