import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import { Modal, Input, 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 ModalTopupComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      selectedOption: '0 Points',
      inputCode1: '',
      inputCode2: '',
      inputCode3: '',
      inputCode4: '',
    };
    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={onOk}
        onCancel={onCancel}
        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" />
          <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>
    )
  }
}