import React, { useContext } from "react";
import { getTranslations } from "../../shared/utils/localization-util";
import SettingsContext from "../settings-context";
import { buildClassName } from "../../shared/utils/class-util";
import Icon from "./icon";

interface AmountInputProps {
  label: string;
  value: number;
  disabled?: boolean;
  min?: number;
  onChange?: (value: number) => void;
}

const AmountInput: React.FC<AmountInputProps> = ({
  label,
  value,
  disabled,
  min,
  onChange,
}) => {
  const { language } = useContext(SettingsContext);
  const translations = getTranslations(language);

  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
    event
  ) => {
    if (onChange) {
      onChange(value + 1);
    }
  };

  const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
    event
  ) => {
    if (onChange) {
      onChange(Math.max(value - 1, min ?? 0));
    }
  };

  return (
    <div
      className={buildClassName([
        "decrement-increment",
        disabled && "decrement-increment--disabled",
      ])}
    >
      <label className="decrement-increment__label">{label}</label>
      <div className="decrement-increment__ui">
        {!disabled && (
          <button
            type="button"
            className="button button--decrement"
            title={translations.INPUT.DECREASE}
            disabled={disabled}
            onClick={handleDecreaseClick}
          >
            <Icon name="ui-min" />
          </button>
        )}
        <span>{value}</span>
        {!disabled && (
          <button
            type="button"
            className="button button--increment"
            title={translations.INPUT.INCREASE}
            disabled={disabled}
            onClick={handleIncreaseClick}
          >
            <Icon name="ui-plus" />
          </button>
        )}
      </div>
    </div>
  );
};

export default AmountInput;