import './InputComponent.css'
import edit from './edit.svg'
import { useEffect, useState } from "react";
import CurrencyInput from "react-currency-input-field";
import { useDispatch } from "react-redux";
import { calcSlice } from "../../store/reducers/calcSlice";

export const InputComponent = ({ value, name, min, max, inputClass, large }) => {
  const dispatch = useDispatch();
  const { handleValue, handleTotal } = calcSlice.actions;
  const [valid, setValid] = useState(false);
  const [valueInput, setValueInput] = useState(value);


  useEffect(() => {
    setValueInput(value)
  }, [value])

  const handleNumber = (number) => {
    if (!number) {
      return;
    }
    const num = Number(number.replace(/ /g, ""));
    console.log(num, "test");
    return num;
  };

  useEffect(() => {
    dispatch(handleTotal());
  }, []);

  const handleTotalValues = (value, name) => {
    dispatch(handleValue({ name: name, value: value }));
    dispatch(handleTotal());
  };

  const handleState = (e) => {
    const { value, name } = e.target;

    setValueInput(value);
    handleTotalValues(value, name);
    handleStyle();
  };

  const handleValidity = (number) => {
    if (!(number < max && number > min && number !== 0)) {
      setValid(false);
      return false;
    } else {
      setValid(true);
      return true;
    }
  };

  const handleOnValueChange = (value, name) => {
    const number = handleNumber(value);
    setValueInput(number);

    handleStyle();

    setValid(false);
    if (!name) {
      return;
    }

    if (!value) {
      setValueInput("");
      return;
    }

    if (!Number.isNaN(number)) {
      const validity = handleValidity(number);

      if (validity) {
        handleTotalValues(number, name);
        return;
      } else {
        return;
      }
    }
  };

  const handleFocusLeft = (e) => {
    const { name, value } = e.target;
    const number = handleNumber(value);
    console.log(number, value, "valuie");
    if (number === 0 && number === undefined) {
      handleTotalValues(min, name);
      return;
    } else {
      if (!valid) {
        if (!(number < max)) {
          handleTotalValues(max, name);
          setValueInput(max);
          return;
        }
        if (number <= min) {
          handleTotalValues(min, name);
          setValueInput(min);
          return;
        }
      } else {
        return;
      }
    }
  };

  const handleStyle = () => {
    let width;
    if (valueInput < min) {
      return (width = "0%");
    }
    width = ((valueInput - min) * 100) / (max - min) + "% 100%";
    return width;
  };

  return (
    <>
      <div className='number-container'>
        <CurrencyInput
          className="number-input"
          decimalsLimit={3}
          allowNegativeValue={false}
          allowDecimals={false}
          groupSeparator={" "}
          style={large ? {width: '78px'} : {width: '45px'}}
          min={min}
          max={max}
          name={name}
          value={valueInput}
          onBlur={(e) => handleFocusLeft(e)}
          onValueChange={(value, name) => handleOnValueChange(value, name)}
        />
        <img className='edit-icon' alt='edit/изменить' src={edit} />
      </div>

      <div className="input-container">
        <input
          style={{
            backgroundSize: handleStyle(),
          }}
          type="range"
          className={inputClass}
          name={name}
          min={min}
          value={valueInput === "" ? 0 : valueInput}
          max={max}
          onChange={(e) => handleState(e)}
        ></input>
        <div className="value-container">
          <span>{min}</span>
          <span>{max}</span>
        </div>
      </div>
    </>
  );
};