import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';

/**
 * A stateless input field for mobile and desktop. It is of Date type
 */
class MobileTypingCalendar extends Component {

    constructor(props) {
        super(props);
        this.myInputRef = React.createRef();
    }

    componentDidMount() {
        this.setState({ InputRenderedElement: ReactDOM.findDOMNode(this.myInputRef.current) }, () => {
            this.setState({ setIndex: this.state.InputRenderedElement.selectionStart });
        });
    }

    componentDidUpdate() {
        if (this.state.InputRenderedElement) {
            this.state.InputRenderedElement.setSelectionRange(this.state.setIndex, this.state.setIndex);
        }
    }


    handleChange = (event) => {

        let inputVal = event.target.value;
        let currentIndexNumber = 0;


        if (this.state.InputRenderedElement) {
            currentIndexNumber = this.state.InputRenderedElement.selectionStart;
        }

        if (inputVal.length === 8 && (this.state.setIndex !== 0)) {

            if (this.state.setIndex === 1) {


                if (currentIndexNumber <= this.state.setIndex) {

                    inputVal = this.insert(inputVal, 'D', this.state.setIndex - 1);
                    this.setState({ setIndex: currentIndexNumber });
                }
                else {


                    console.log('Iv -->', inputVal);
                    console.log('old -->', this.state.old);
                    console.log('Cin -->', currentIndexNumber);
                    console.log('seIn -->', this.state.setIndex);

                    inputVal = this.insert(this.state.old, 'D', this.state.setIndex - 1);
                    inputVal=this.removeByIndex(inputVal,this.state.setIndex+1);

                    this.setState({ setIndex: this.state.setIndex-1 });
                }
                if (currentIndexNumber === 1) {
                    inputVal = this.state.old;
                }
            }
            else if (this.state.setIndex === 2) {

                inputVal = this.insert(inputVal, 'M', this.state.setIndex + 1);
                this.setState({ setIndex: currentIndexNumber });
            }
            else if (this.state.setIndex === 3) {
                inputVal = this.insert(this.removeByIndex(this.state.old, this.state.setIndex - 1), 'M', this.state.setIndex);
                this.setState({ setIndex: this.state.setIndex - 2 });
            }
            else if (this.state.setIndex === 4) {

                inputVal = this.removeByIndex(this.insert(this.state.old, 'M', this.state.setIndex - 1), this.state.setIndex + 1);
                this.setState({ setIndex: this.state.setIndex - 1 });
            }
            else if (this.state.setIndex === 6) {
                inputVal = this.insert(this.removeByIndex(this.state.old, this.state.setIndex - 1), 'Y', this.state.setIndex);
                this.setState({ setIndex: this.state.setIndex - 2 });
            }
            else if (this.state.setIndex === 7) {

                inputVal = this.insert(this.removeByIndex(this.state.old, this.state.setIndex), 'Y', this.state.setIndex);

                this.setState({ setIndex: this.state.setIndex - 1 });
            }
            else if (this.state.setIndex === 8) {
                inputVal = this.insert(this.removeByIndex(this.state.old, this.state.setIndex), 'Y', this.state.setIndex);
                this.setState({ setIndex: this.state.setIndex - 1 });
            }
            else if (this.state.setIndex === 9) {
                inputVal = this.insert(this.removeByIndex(this.state.old, this.state.setIndex), 'Y', this.state.setIndex);
                this.setState({ setIndex: this.state.setIndex - 1 });
            }
        }
        else if ((inputVal.length === 8) && (this.state.setIndex === 0)) {
            inputVal = this.state.old;
        }
        else if ((inputVal.length === 10) && (this.state.setIndex !== 9)) {
            //Handle Insert

            const addedChar = this.getAdddedChar(inputVal, this.state.old);

            if (!isNaN(addedChar) && addedChar !== ' ') {

                if ((this.state.setIndex === 1) || (this.state.setIndex === 4)) {
                    inputVal = this.insert(this.removeByIndex(inputVal, currentIndexNumber), addedChar, this.state.setIndex);
                    inputVal = this.removeByIndex(inputVal, this.state.setIndex + 4);
                    this.setState({ setIndex: this.state.setIndex + 2 });
                }
                else {
                    inputVal = this.insert(this.removeByIndex(inputVal, currentIndexNumber), addedChar, this.state.setIndex);
                    inputVal = this.removeByIndex(inputVal, this.state.setIndex + 2);
                    this.setState({ setIndex: this.state.setIndex + 1 });
                }
            }
            else {

                inputVal = this.state.old;
            }
        }
        else if (inputVal.length === 9) {

            inputVal = this.removeByIndex(this.state.old, 10);
            this.setState({ setIndex: this.state.setIndex - 1 });
        }
        else if ((inputVal.length === 10) && (this.state.setIndex === 9)) {
            this.setState({ setIndex: this.state.setIndex + 1 });
        } else if (inputVal.length === 7) {
            inputVal = this.state.old;
        } else if (inputVal.length <= 6) {
            inputVal = this.state.old;
        }


        if (inputVal.length === 11) {
            if (currentIndexNumber === 11) {
                inputVal = this.state.old;
            }
        }
        else {

            let dmya = inputVal.split('/');


            if (!isNaN(dmya[0])) {
                if ((dmya[0] >= 32)) {
                    this.setState({ setIndex: this.state.setIndex });
                    inputVal = this.state.old;
                }
            }
            if (!isNaN(dmya[1])) {
                if (dmya[1] >= 13) {
                    this.setState({ setIndex: this.state.setIndex });
                    inputVal = this.state.old;
                }
            }
            if (!isNaN(dmya[0])) {
                if (dmya[0] === '00') {
                    this.setState({ setIndex: this.state.setIndex });
                    inputVal = this.state.old;
                }
            }

            if (!isNaN(dmya[0])) {
                if (dmya[1] === '00') {
                    this.setState({ setIndex: this.state.setIndex });
                    inputVal = this.state.old;
                }
            }

            if (!isNaN(dmya[0])) {
                if (dmya[2] === '0000') {
                    this.setState({ setIndex: this.state.setIndex });
                    inputVal = this.state.old;
                }
            }

            this.setState({ val: inputVal, old: inputVal }, () => {
                this.props.onChangeNewDate(this.state.val);
            });

        }
    }

    handleBlur = () => {

        let inputVal = this.state.val;

        if (inputVal.length === 9) {
            if (inputVal === 'D/MM/YYYY') {
                this.props.onBlurNewDate(false);
            }
            else {
                this.props.onBlurNewDate(true);
            }
        }
        else if ((inputVal.includes('D')) || (inputVal.includes('M')) || (inputVal.includes('Y'))) {
            this.props.onBlurNewDate(true);
        }
        else {
            this.props.onBlurNewDate(false);
        }
    }

    handleFocus = () => {
        this.setState({ val: this.props.value });
    }

    handleClick = () => {

        if (this.state.InputRenderedElement) {
            this.state.InputRenderedElement.setSelectionRange(this.state.setIndex, this.state.setIndex);
        }
    }

    getAdddedChar = (new_str, old) => {
        for (let i = 0; i <= new_str.length; i++) {
            if (!(new_str.charAt(i) === old.charAt(i))) {
                return new_str.charAt(i);
            }
        }
    }

    insert = (main_string, ins_string, pos) => {
        if (typeof (pos) == 'undefined') {
            pos = 0;
        }
        if (typeof (ins_string) == 'undefined') {
            ins_string = '';
        }
        return main_string.slice(0, pos) + ins_string + main_string.slice(pos);
    }

    removeByIndex = (str, index) => {
        if (index === 0) {
            return str.slice(1);
        } else {
            return str.slice(0, index - 1) + str.slice(index);
        }
    }

    state = {
        val: '',
        setIndex: 0,
        old: 'D/MM/YYYY'
    }

    render() {
        const inputProps = this.props;

        return (
            <div className={'jp-mobile-typing-calendar'}>
                <input type="text" onFocus={this.handleFocus} onClick={this.handleClick} onChange={this.handleChange} value={this.state.val} onBlur={this.handleBlur} ref={this.myInputRef} spellCheck='false' placeholder={inputProps.placeholder} />
            </div>
        );
    }

}

export default MobileTypingCalendar;

MobileTypingCalendar.propTypes = {
    /** Date input value */
    value: PropTypes.string,
    /** Placeholder for input date */
    placeholder: PropTypes.string,
    /** onChangeDobDate is to update state in parent component through child */
    onChangeNewDate: PropTypes.func.isRequired,
    /** onBlurDobDate is to update state in parent component through child */
    onBlurNewDate: PropTypes.func.isRequired
};

MobileTypingCalendar.defaultProps = {
    value: 'D/MM/YYYY'
};