import React, { ChangeEvent, useState } from "react";

import "./number-input-styles.scss";
import { NumberInputProps } from "@app/models/components";

const NumberInput: React.FC<NumberInputProps> = ({
  id,
  name,
  label,
  disabled,
  value,
  min,
  max,
  onChange,
  placeholder,
}) => {
  const [isFocused, setIsFocused] = useState(false);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.value === "") {
      onChange(name, null);

      return;
    }

    const numericValue = parseInt(e.target.value, 10);
    if (!isNaN(numericValue)) {
      const clampedValue = Math.min(
        Math.max(numericValue, min || -Infinity),
        max || Infinity
      );
      onChange(name, clampedValue);
    }
  };

  const handleIncrement = () => {
    const numericValue = parseInt(value || "0", 10);
    if (!isNaN(numericValue) && (max === undefined || numericValue < max)) {
      onChange(name, numericValue + 1);
    }
  };

  const handleDecrement = () => {
    const numericValue = parseInt(value || "0", 10);
    if (!isNaN(numericValue) && (min === undefined || numericValue > min)) {
      onChange(name, numericValue - 1);
    }
  };

  const handleRootDivClick = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div className="numberInput-wrapper">
      <label htmlFor={name} className="numberInput-label">
        {label}
      </label>
      <div
        aria-label="Number input"
        className={`numberInput ${isFocused ? "numberInput-focused" : ""}`}
      >
        <button
          aria-controls={id}
          tabIndex={-1}
          aria-disabled={disabled}
          className="numberInput-decrementButton"
          onClick={handleDecrement}
          type="button"
        >
          ▾
        </button>
        <button
          aria-controls={id}
          tabIndex={-1}
          aria-disabled={disabled}
          className="numberInput-incrementButton"
          onClick={handleIncrement}
          type="button"
        >
          ▴
        </button>
        <input
          type="text"
          id={id}
          name={name}
          autoComplete="off"
          autoCorrect="off"
          spellCheck="false"
          aria-disabled={disabled}
          placeholder={placeholder}
          className="numberInput-input css-336v5f"
          value={value ?? ""}
          onChange={handleInputChange}
          onBlur={handleBlur}
          onClick={handleRootDivClick}
        />
      </div>
    </div>
  );
};

export default NumberInput;