import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import { Modal, Input, Alert, Select, message } 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 ModalTopupComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      selectedOption: '0 Points',
      inputCode1: '',
      inputCode2: '',
      inputCode3: '',
      inputCode4: '',
      confirmLoading: false
    };
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {}

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

    return (
      <Modal
        title={title}
        visible={isVisible}
        onOk={async () => {
          this.setState({
            confirmLoading: true
          });
          let voucherCode = this.state.inputCode1 + this.state.inputCode2 + this.state.inputCode3 + this.state.inputCode4;

          try {
            await this.props.appstate.wallet.redeemVoucherCode(voucherCode);
            this.props.onOk();
            message.info("Voucher redeem success");
          } catch (e) {
            message.error(e.message);
          } finally {
            this.setState({
              inputCode1: '',
              inputCode2: '',
              inputCode3: '',
              inputCode4: '',
              confirmLoading: false
            });
          }

        }}
        onCancel={() => {
          this.setState({
            inputCode1: '',
            inputCode2: '',
            inputCode3: '',
            inputCode4: ''
          });
          onCancel();
        }}
        confirmLoading={this.state.confirmLoading}
        bodyStyle={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <div className={'modalContainer'}>
          <Input value={this.state.inputCode1} maxLength={4} ref={e => this.inputCode1 = e} onChange={(e) => {
            this.setState({inputCode1: e.target.value})
            if(e.target.value.length === 4){
              this.inputCode2.focus();
            }
          }} className={'inputCode'} placeholder="XXXX" onPaste={(e) => {
            let pasted = e.clipboardData.getData('Text');

            let splittedSection = pasted.match(/.{1,4}/g);
            console.log(splittedSection, 'splic');
            if(splittedSection[3]) {
              this.setState({inputCode4: splittedSection[3]})
            }
            if(splittedSection[2]) {
              this.setState({inputCode3: splittedSection[2]})
            }
            if(splittedSection[1]) {
              this.setState({inputCode2: splittedSection[1]})
            }
            if(splittedSection[0]) {
              this.setState({inputCode1: splittedSection[0]})
            }
          }}/>
          <p className={'stripeText'}>-</p>
          <Input value={this.state.inputCode2} maxLength={4} ref={e => this.inputCode2 = e} onChange={(e) => {
            this.setState({inputCode2: e.target.value})
            if(e.target.value.length === 4){
              this.inputCode3.focus();
            }

            if(e.target.value.length === 0){
              this.inputCode1.focus();
            }
          }} className={'inputCode'} placeholder="XXXX" />
          <p className={'stripeText'}>-</p>
          <Input value={this.state.inputCode3} maxLength={4} ref={e => this.inputCode3 = e} onChange={(e) => {
            this.setState({inputCode3: e.target.value})
            if(e.target.value.length === 4){
              this.inputCode4.focus();
            }

            if(e.target.value.length === 0){
              this.inputCode2.focus();
            }
          }} className={'inputCode'} placeholder="XXXX" />
          <p className={'stripeText'}>-</p>
          <Input value={this.state.inputCode4} maxLength={4} ref={e => this.inputCode4 = e} onChange={(e) => {
            this.setState({inputCode4: e.target.value})
            if(e.target.value.length === 0){
              this.inputCode3.focus();
            }
          }} className={'inputCode'} placeholder="XXXX" />
        </div>
      </Modal>
    )
  }
}
