import "./InputStep.scss";

import React, {Component} from "react";
import classNames from "classnames";
import Icon from "sbx-react-icon";
import {validateInputNumber} from "helpers/Validate";
const caretUp = require("./caret-up.svg");
const caretDown = require("./caret-down.svg");

export default class InputStep extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.calc(props.valueStep, props.value)
        }
    }
    calc = (valueStep, next) => {
        const digits = String(valueStep).split('.')[1] ? String(valueStep).split('.')[1].length : 0;
        if(digits && String(next).split('.')[1]) {
            let left = String(next).split('.')[0];
            let right = String(next).split('.')[1];
            right = right.substring(0, digits);
            return parseFloat(left.concat('.', right)).toFixed(digits);
        } else {
            return next
        }
    };
    onClick = type => {
        const {valueMin, valueMax, valueStep, readOnly} = this.props;
        const {value} = this.state;
        const floatValue = String(value).length ? parseFloat(value) : 0;
        let nextValue = 0;
        const digits = String(valueStep).split('.')[1] ? String(valueStep).split('.')[1].length : 0;
        if(readOnly) {
            return false
        }
        if(type === "minus") {
            if(floatValue <= valueMin || (floatValue - valueStep) <= valueMin || isNaN(floatValue)) {
                nextValue = valueMin
            } else {
                nextValue = Math.floor((floatValue * (10 ** digits))/(valueStep * (10 ** digits)) - 1) * valueStep;
            }
        }
        if(type === "plus") {
            if(floatValue >= valueMax || (floatValue + valueStep) >= valueMax || isNaN(floatValue)) {
                nextValue = valueMax
            } else {
                nextValue = Math.round((floatValue * (10 ** digits))/(valueStep * (10 ** digits)) + 1) * valueStep;
            }
        }
        this.setState({value: this.calc(valueStep, nextValue)}, () => {
            this.input.focus();
            this.props.onChange && this.props.onChange(nextValue)
        })
    };
    onInput = e => {
        const {valueMin, valueMax} = this.props;
        const {value} = e.target;
        const validate = this.props.validate || validateInputNumber;
        if(validate(value) && parseFloat(value) <= valueMax || value === "") {
            this.setState({
                value,
                valueIsInvalid: this.props.valueIsInvalid
            }, () => {
                this.props.onChange && this.props.onChange(value)
            })
        }
    };
    render() {
        const {value} = this.state;
        return (
            <div className={`input-step ${this.props.className}`}>
                <input
                    type="text"
                    value={value}
                    readOnly={this.props.readOnly}
                    onInput={this.onInput}
                    onFocus={this.props.onFocus}
                    onBlur={this.props.onBlur}
                    ref={e => this.input = e}
                />
                <Icon
                    src={caretUp}
                    className={classNames({
                        "up": true,
                        "disabled": this.props.readOnly
                    })}
                    onClick={() => {
                        this.onClick("plus")
                    }}
                />
                <Icon
                    src={caretDown}
                    className={classNames({
                        "down": true,
                        "disabled": this.props.readOnly
                    })}
                    onClick={() => {
                        this.onClick("minus")
                    }}
                />
            </div>
        )
    }
}