"use client";

import { type PropsWithChildren, useState } from "react";

import { useLocale } from "@/hooks/useLocale";
import { cn } from "@/libs/utils";

import { Button } from "../button/button";
import Card from "../card/card";
import LIcon from "../lucid-icon/lucid-icon";
import { Tooltip } from "../tooltip/tooltip";

interface CounterCommonType {
  min?: number;
  max?: number;
  minText?: string | null;
  maxText?: string | null;
}
interface ButtonWrapperProps extends PropsWithChildren, CounterCommonType {
  count: number;
}
export interface CounterProps extends CounterCommonType {
  onChange: (value: number) => void;
  value: number;
}

const ButtonWrapper = ({
  children,
  min,
  max,
  minText,
  maxText,
  count,
}: ButtonWrapperProps) => {
  const { t } = useLocale();
  const customText = minText ?? maxText;
  const criteriaValue = min ?? max;
  const defaultText = min
    ? t("Value cannot be less than {{value}}", {
        value: criteriaValue,
      })
    : t("Value cannot be greater than {{value}}", {
        value: criteriaValue,
      });
  const isTooltip =
    ((minText || minText === null) && count === min) ||
    ((maxText || maxText === null) && count === max);

  return isTooltip ? (
    <Tooltip
      label={customText ?? defaultText}
      wrapperClassName="flex-1 flex justify-center !rounded-none bg-transparent !p-0 duration-150 active:scale-75"
    >
      {children}
    </Tooltip>
  ) : (
    children
  );
};

const Counter = (props: CounterProps) => {
  const { min, max, value = 0, onChange, minText, maxText } = props;
  const [count, setCount] = useState(value);
  const isMinDisabled = min === count;
  const isMaxDisabled = max === count;
  const handleIncreaseCount = () => {
    if (max) {
      if (count + 1 <= max) {
        setCount(count + 1);
        onChange(count + 1);
      }
    } else {
      setCount(count + 1);
      onChange(count + 1);
    }
  };

  const handleDecreaseCount = () => {
    if (min !== undefined) {
      if (count - 1 >= min) {
        setCount(count - 1);
        onChange(count - 1);
      }
    } else {
      setCount(count - 1);
      onChange(count - 1);
    }
  };

  const isMinDisabledWithText = min ? value <= min && !minText : false;
  const isMaxDisabledWithText = max ? value >= max && !maxText : false;

  return (
    <Card className="flex h-[40px] w-[150px] items-center justify-between p-0">
      <ButtonWrapper minText={minText} min={min} count={count}>
        <Button
          onClick={handleDecreaseCount}
          variant={isMinDisabled ? "disable" : "link"}
          className={cn(
            "flex-1 !rounded-r-none bg-transparent !p-0 duration-150 active:scale-75",
            isMinDisabled &&
              "!bg-transparent !shadow-none !border-l-0 cursor-default active:!transform-none",
          )}
          disabled={isMinDisabledWithText}
        >
          <LIcon name="Minus" className="w-[20px]" />
        </Button>
      </ButtonWrapper>
      <div className="h-full w-px shrink-0 bg-gray-200" />
      <div className="flex shrink-0 basis-[60px] justify-center text-sm font-medium">
        {count}
      </div>
      <div className="h-full w-px shrink-0 bg-gray-200" />
      <ButtonWrapper maxText={maxText} max={max} count={value}>
        <Button
          onClick={handleIncreaseCount}
          variant={isMaxDisabled ? "disable" : "link"}
          disabled={isMaxDisabledWithText}
          className={cn(
            "flex-1 !rounded-l-none bg-transparent !p-0 duration-150 active:scale-75",
            isMaxDisabled &&
              "!bg-transparent !shadow-none !border-r-0 cursor-default active:!transform-none",
          )}
        >
          <LIcon name="Plus" className="w-[20px]" />
        </Button>
      </ButtonWrapper>
    </Card>
  );
};

export default Counter;