import { TCopy } from "@/components/Copy";
import { TIcon } from "@/components/Icon";
import useHover from "@/hooks/useHover";
import { shortenAddress } from "@/utils/helper";
import clsx from "clsx";
import { useState } from "react"; // 添加 useState 引入
import SettingPopup from "../SettingPopup/SettingPopup";

export interface AccountInfoProps {
  name: string;
  address: string;
  icon?: React.ReactNode;
  iconSrc?: string;
}
interface PropsType {
  className?: string;
  accountInfo: AccountInfoProps;
  showSetting?: boolean;
  onChangePayPin?: () => void;
  onClose?: () => void;
  onBack?: () => void;
}

const AccountInfo = ({
  accountInfo,
  showSetting = true,
  onChangePayPin,
}: PropsType) => {
  // const copyMsg = "Copied to clipboard successfully";
  const onCopyAddress = async () => {
    try {
      await navigator.clipboard.writeText(accountInfo.address);
      // Toast.show(copyMsg);
    } catch (err) {
      console.error("Failed to copy: ", err);
    }
  };
  const [hoverRef, isHover] = useHover();

  const [showSettingPopup, setShowSettingPopup] = useState(false);

  const onClose = () => {
    setShowSettingPopup(false);
  };

  return (
    <div className="uikit-py-4 uikit-px-3 uikit-flex uikit-items-center uikit-justify-between uikit-font-switzer uikit-rounded-lg uikit-border uikit-border-border uikit-border-solid uikit-box-border">
      <div className="uikit-flex uikit-items-center uikit-gap-3">
        <div className="uikit-size-14 uikit-flex uikit-items-center uikit-justify-center">
          {accountInfo.iconSrc ? (
            <img
              className="uikit-size-[46px] uikit-rounded-[10px] uikit-border-solid uikit-border uikit-border-l1"
              src={accountInfo.iconSrc}
              alt=""
            />
          ) : (
            accountInfo.icon
          )}
        </div>
        <div className="uikit-flex uikit-flex-col uikit-gap-[2px]">
          <span className="uikit-text-t1 uikit-text-base uikit-font-medium uikit-font-switzer uikit-max-w-[141px]">
            {shortenAddress(accountInfo.address, 6, 4)}
          </span>
          <span className="uikit-text-t3 uikit-text-tiny uikit-font-switzer ">
            {accountInfo.name}
          </span>
        </div>
      </div>
      <div className="uikit-flex uikit-gap-x-3">
        <div
          ref={hoverRef}
          className={clsx(
            "uikit-flex uikit-items-center uikit-justify-center uikit-size-8 uikit-rounded-full uikit-bg-bg4 dark:uikit-bg-[#282828] uikit-cursor-pointer",
            {
              "uikit-opacity-50": isHover,
            },
          )}
        >
          <TCopy
            className="uikit-bg-transparent"
            text={accountInfo.address}
            onCopy={onCopyAddress}
          />
        </div>
        {showSetting && (
          <div
            className={clsx(
              "uikit-flex uikit-items-center uikit-justify-center uikit-size-8 uikit-rounded-full uikit-bg-bg4 dark:uikit-bg-[#282828] uikit-cursor-pointer hover:uikit-opacity-50",
            )}
          >
            <TIcon
              name="tg_wallet_more"
              className="uikit-text-t1"
              onClick={() => setShowSettingPopup(true)}
            />
          </div>
        )}
      </div>
      <SettingPopup
        close
        back
        opened={showSettingPopup}
        onChangePayPin={onChangePayPin}
        onClose={onClose}
        onBack={onClose}
      />
    </div>
  );
};

export default AccountInfo;