"use client";
import AppButton from "@/components/ui/button";
import AppTooltip from "@/components/ui/tooltip";
import AppTypography from "@/components/ui/typography";
import useCopy from "@/hooks/useCopy";
import useShowOrHide from "@/hooks/useShowOrHide";
import { Copy, Eye, EyeOff } from "lucide-react";
import { useTranslations } from "next-intl";
import React from "react";

interface AppPrivateModeProps {
  data: string;
  isShowToggleButton?: boolean;
  isShowCopyButton?: boolean;
}

const AppPrivateMode = ({
  data,
  isShowCopyButton = false,
  isShowToggleButton = false,
}: AppPrivateModeProps) => {
  const t = useTranslations("Common");
  const { isShown, getMaskedValue, handleToggle } = useShowOrHide();
  const { copyToClipboard } = useCopy({
    translations: {
      copySuccess: t("toasts.copy_success"),
      copyError: t("toasts.copy_failed"),
    },
  });

  const handleCopy = async (e, text: string | undefined) => {
    e.stopPropagation();
    if (text) {
      await copyToClipboard(e, text);
    }
  };

  return (
    <div className="flex justify-between items-center">
      {!data && <AppTypography>-</AppTypography>}
      {data && (
        <div className="w-[400px] text-wrap">
          <AppTypography>
            {isShowToggleButton ? getMaskedValue(data) : data}
          </AppTypography>
        </div>
      )}

      <div className="flex gap-2">
        {isShowToggleButton && data && (
          <AppButton
            type="text"
            shape="circle"
            onClick={(e: React.MouseEvent<HTMLElement>) =>
              handleToggle(e, data)
            }
          >
            <>
              {isShown(data) ? (
                <AppTooltip content={t("hide")}>
                  <EyeOff size={18} strokeWidth={1.5} />
                </AppTooltip>
              ) : (
                <AppTooltip content={t("show")}>
                  <Eye size={18} strokeWidth={1.5} />
                </AppTooltip>
              )}
            </>
          </AppButton>
        )}

        {isShowCopyButton && data && (
          <AppButton
            type="text"
            shape="circle"
            onClick={(e: React.MouseEvent<HTMLElement>) => handleCopy(e, data)}
          >
            <AppTooltip content={t("copy")}>
              <Copy size={18} strokeWidth={1.5} />
            </AppTooltip>
          </AppButton>
        )}
      </div>
    </div>
  );
};

export default AppPrivateMode;