import { EstimateInputRoot } from "@/components/estimates/inputs/root";
import {
    EEstimateSystem,
    MAX_ESTIMATE_POINT_INPUT_LENGTH,
} from "@buzzwaretech/constants";
import { useTranslation } from "@buzzwaretech/i18n";
import { CheckIcon, CloseIcon } from "@buzzwaretech/propel/icons";
import { TOAST_TYPE, setToast } from "@buzzwaretech/propel/toast";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
import type {
    TEstimatePointsObject,
    TEstimateSystemKeys,
    TEstimateTypeErrorObject,
} from "@buzzwaretech/types";
import { Spinner } from "@buzzwaretech/ui";
import { cn, isEstimatePointValuesRepeated } from "@buzzwaretech/utils";
import { Info } from "lucide-react";
import { observer } from "mobx-react";
import type { FormEvent } from "react";
import { useEffect, useState } from "react";
// helpers
// hooks
import { useEstimatePoint } from "@/hooks/store/estimates/use-estimate-point";
// buzzwareTech web constants

type TEstimatePointUpdate = {
  workspaceSlug: string;
  projectId: string;
  estimateId: string | undefined;
  estimatePointId: string | undefined;
  estimateType: TEstimateSystemKeys;
  estimatePoints: TEstimatePointsObject[];
  estimatePoint: TEstimatePointsObject;
  handleEstimatePointValueUpdate: (estimateValue: string) => void;
  closeCallBack: () => void;
  estimatePointError?: TEstimateTypeErrorObject | undefined;
  handleEstimatePointError?: (
    newValue: string,
    message: string | undefined,
    mode?: "add" | "delete",
  ) => void;
};

export const EstimatePointUpdate = observer(function EstimatePointUpdate(
  props: TEstimatePointUpdate,
) {
  const {
    workspaceSlug,
    projectId,
    estimateId,
    estimatePointId,
    estimateType,
    estimatePoints,
    estimatePoint,
    handleEstimatePointValueUpdate,
    closeCallBack,
    estimatePointError,
    handleEstimatePointError,
  } = props;
  // hooks
  const { updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
  // i18n
  const { t } = useTranslation();
  // states
  const [loader, setLoader] = useState(false);
  const [estimateInputValue, setEstimateInputValue] = useState<
    string | undefined
  >(undefined);

  useEffect(() => {
    if (estimateInputValue === undefined && estimatePoint)
      setEstimateInputValue(estimatePoint?.value || "");
  }, [estimateInputValue, estimatePoint]);

  const handleSuccess = (value: string) => {
    handleEstimatePointValueUpdate(value);
    setEstimateInputValue("");
    closeCallBack();
  };

  const handleClose = () => {
    setEstimateInputValue("");
    closeCallBack();
  };

  const handleEstimateInputValue = (value: string) => {
    if (value.length <= MAX_ESTIMATE_POINT_INPUT_LENGTH) {
      setEstimateInputValue(() => value);
      handleEstimatePointError && handleEstimatePointError(value, undefined);
    }
  };

  const handleUpdate = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!workspaceSlug || !projectId) return;

    handleEstimatePointError &&
      handleEstimatePointError(estimateInputValue || "", undefined, "delete");

    if (estimateInputValue) {
      const currentEstimateType: EEstimateSystem | undefined = estimateType;
      let isEstimateValid = false;

      const currentEstimatePointValues = estimatePoints
        .map((point) =>
          point?.key != estimatePoint?.key ? point?.value : undefined,
        )
        .filter((value) => value != undefined);
      const isRepeated =
        (estimateType &&
          isEstimatePointValuesRepeated(
            currentEstimatePointValues,
            estimateType,
            estimateInputValue,
          )) ||
        false;

      if (!isRepeated) {
        if (
          currentEstimateType &&
          [EEstimateSystem.TIME, EEstimateSystem.POINTS].includes(
            currentEstimateType,
          )
        ) {
          if (estimateInputValue && !isNaN(Number(estimateInputValue))) {
            if (Number(estimateInputValue) <= 0) {
              if (handleEstimatePointError)
                handleEstimatePointError(
                  estimateInputValue,
                  t("project_settings.estimates.validation.min_length"),
                );
              return;
            } else {
              isEstimateValid = true;
            }
          }
        } else if (
          currentEstimateType &&
          currentEstimateType === EEstimateSystem.CATEGORIES
        ) {
          if (
            estimateInputValue &&
            estimateInputValue.length > 0 &&
            isNaN(Number(estimateInputValue))
          ) {
            isEstimateValid = true;
          }
        }

        if (isEstimateValid) {
          if (estimateId != undefined) {
            if (estimateInputValue === estimatePoint.value) {
              setLoader(false);
              if (handleEstimatePointError)
                handleEstimatePointError(estimateInputValue, undefined);

              handleClose();
            } else
              try {
                setLoader(true);

                const payload = {
                  value: estimateInputValue,
                };
                await updateEstimatePoint(workspaceSlug, projectId, payload);

                setLoader(false);
                if (handleEstimatePointError)
                  handleEstimatePointError(
                    estimateInputValue,
                    undefined,
                    "delete",
                  );
                handleClose();
                setToast({
                  type: TOAST_TYPE.SUCCESS,
                  title: t(
                    "project_settings.estimates.toasts.updated.success.title",
                  ),
                  message: t(
                    "project_settings.estimates.toasts.updated.success.message",
                  ),
                });
              } catch {
                setLoader(false);
                if (handleEstimatePointError)
                  handleEstimatePointError(
                    estimateInputValue,
                    t(
                      "project_settings.estimates.validation.unable_to_process",
                    ),
                  );
                setToast({
                  type: TOAST_TYPE.ERROR,
                  title: t(
                    "project_settings.estimates.toasts.updated.error.title",
                  ),
                  message: t(
                    "project_settings.estimates.toasts.updated.error.message",
                  ),
                });
              }
          } else {
            handleSuccess(estimateInputValue);
          }
        } else {
          setLoader(false);
          if (handleEstimatePointError)
            handleEstimatePointError(
              estimateInputValue,
              [EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(
                estimateType,
              )
                ? t("project_settings.estimates.validation.numeric")
                : t("project_settings.estimates.validation.character"),
            );
        }
      } else if (handleEstimatePointError)
        handleEstimatePointError(
          estimateInputValue,
          t("project_settings.estimates.validation.already_exists"),
        );
    } else if (handleEstimatePointError)
      handleEstimatePointError(
        estimateInputValue || "",
        t("project_settings.estimates.validation.empty"),
      );
  };

  return (
    <form
      onSubmit={handleUpdate}
      className="relative flex items-center gap-2 pr-2.5 text-14"
    >
      <div
        className={cn(
          "relative my-1 flex w-full items-center rounded-sm border",
          estimatePointError?.message
            ? `border-danger-strong`
            : `border-subtle`,
        )}
      >
        <EstimateInputRoot
          estimateType={estimateType}
          handleEstimateInputValue={handleEstimateInputValue}
          value={estimateInputValue}
        />
        {estimatePointError?.message && (
          <>
            <Tooltip
              tooltipContent={
                (estimateInputValue || "")?.length >= 1
                  ? t("project_settings.estimates.validation.unsaved_changes")
                  : estimatePointError?.message
              }
              position="bottom"
            >
              <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
                <Info size={14} />
              </div>
            </Tooltip>
          </>
        )}
      </div>

      {estimateInputValue && estimateInputValue.length > 0 && (
        <button
          type="submit"
          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
          disabled={loader}
        >
          {loader ? (
            <Spinner className="h-4 w-4" />
          ) : (
            <CheckIcon width={14} height={14} />
          )}
        </button>
      )}
      <button
        type="button"
        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
        onClick={handleClose}
        disabled={loader}
      >
        <CloseIcon height={14} width={14} className="text-secondary" />
      </button>
    </form>
  );
});