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';
import ReactHtmlParser from "react-html-parser";
import MediaQuery from 'react-responsive';

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.main', '');

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

    // console.log(item.selectedData);

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

    return (
      <div>
        <MediaQuery query="(min-device-width: 800px)">
          <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
            }}>
              <div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
              {(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) => {
                  console.log({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 : get(data, 'name', '').name,
                    skuPrice : get(data, 'regular_price', '0.0'),
                    buttonDisbaled: false
                  })
                }}
                onDropdownVisibleChange={(value) => {
                  this.setState({hidden: 'inline'})
                }}
              >
                {(item.selectedData.sku || [{
                  vouchers: [{count: +get(data, 'stock', '0.0')}],
                  price: get(data, 'regular_price', '0.0'),
                  id: get(data, 'id', ''),
                  name: get(data, 'name', '')
                }]).map((selectedItem, index) => {
                  // const {vouchers:[{count}]} = item;

                  console.log({item: selectedItem})

                  let count = 1;

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

                  return (
                    <Option disabled={outOfStock} value={selectedItem.id}>
                      <div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
                        <span>{selectedItem.name} {outOfStock ? " - Out of Stock" : ""}</span>
                        <span style={{color:'#FF6F00', display:this.state.hidden}}>
                        Rp. <NumberFormat value={(+selectedItem.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>
        </MediaQuery>
        <MediaQuery query="(max-device-width: 800px)">
          <Modal
            title={title}
            visible={isVisible}
            onOk={onOk}
            onCancel={onCancel}
            footer={null}
            bodyStyle={{
              padding: 0,
              margin: 0,
            }}
            style={{
              minWidth: '50vw'
            }}
          >
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              // flex: 0.7,
              padding: 30
            }}>
              <div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
              {(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) => {
                  console.log({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 : get(data, 'name', '').name,
                    skuPrice : get(data, 'regular_price', '0.0'),
                    buttonDisbaled: false
                  })
                }}
                onDropdownVisibleChange={(value) => {
                  this.setState({hidden: 'inline'})
                }}
              >
                {(item.selectedData.sku || [{
                  vouchers: [{count: +get(data, 'stock', '0.0')}],
                  price: get(data, 'regular_price', '0.0'),
                  id: get(data, 'id', ''),
                  name: get(data, 'name', '')
                }]).map((selectedItem, index) => {
                  // const {vouchers:[{count}]} = item;

                  console.log({item: selectedItem})

                  let count = 1;

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

                  return (
                    <Option disabled={outOfStock} value={selectedItem.id}>
                      <div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
                        <span>{selectedItem.name} {outOfStock ? " - Out of Stock" : ""}</span>
                        <span style={{color:'#FF6F00', display:this.state.hidden}}>
                        Rp. <NumberFormat value={(+selectedItem.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>
        </MediaQuery>
      </div>
    )
  }
}