import { Popup } from "@/components/Popup";
import { detectDevice } from "@/utils/device";
import clsx from "clsx";
import { useState } from "react";
import google from "../../../assets/images/google_play.svg";
import android from "../../../assets/images/icon_android.svg";
import appleIcon2 from "../../../assets/images/icon_apple2.svg";
import Button from "./Button";
import Download from "./DownLoad";

export default function ExportMnemonicPhrase() {
  const deviceType = detectDevice();
  const [openDownload, setOpenDownload] = useState(false);
  return (
    <div
      className={
        "uikit-flex uikit-h-full uikit-w-full uikit-flex-col uikit-overflow-auto"
      }
    >
      <div
        className={
          "uikit-flex-1 uikit-text-t1 uikit-pb-[30px] uikit-pt-2 uikit-flex uikit-flex-col"
        }
      >
        <div className="uikit-px-5 uikit-flex uikit-flex-col uikit-items-center">
          <LockIcon className="uikit-rounded-full uikit-size-[150px]" />
          <div className="uikit-mt-6 uikit-text-xl uikit-font-bold uikit-font-['Switzer'] uikit-leading-7">
            If your mnemonic phrase is <br />
            exposed, your crypto assets are at risk of being stolen.{" "}
          </div>
          <div className="uikit-mt-2 uikit-text-sm uikit-font-normal uikit-font-['Switzer']">
            Anyone with access to this phrase can fully control, transfer, or
            spend your assets without your consent.
            <br />
            Please use the Tomo App with the same social login method to
            securely export your mnemonic phrase.
          </div>
        </div>
        <div className="uikit-px-4 uikit-flex uikit-gap-2.5 uikit-w-auto uikit-mt-8">
          {(deviceType?.deviceType === "PC" ||
            (deviceType?.deviceType === "Mobile" &&
              deviceType?.osType === "iOS")) && (
            <Button
              primary
              className="uikit-text-t1"
              onClick={async () => {
                if (deviceType?.deviceType === "PC") {
                  setOpenDownload(true);
                  return;
                }
                window.open(
                  "https://apps.apple.com/us/app/tomo-inc/id6468010287",
                  "_blank",
                );
              }}
            >
              <AppleImg2 />
              App Store
            </Button>
          )}
          {(deviceType?.deviceType === "PC" ||
            (deviceType?.deviceType === "Mobile" &&
              deviceType?.osType === "Android")) && (
            <Button
              primary
              className="uikit-text-t1"
              onClick={async () => {
                if (deviceType?.deviceType === "PC") {
                  setOpenDownload(true);
                  return;
                }
                window.open(
                  "https://play.google.com/store/apps/details?id=tomo.app.unyx",
                  "_blank",
                );
              }}
            >
              <img src={google} alt="" />
              Google Play
            </Button>
          )}
          {deviceType?.deviceType === "Mobile" &&
            deviceType?.osType === "Android" && (
              <Button
                primary
                className="uikit-text-t1"
                onClick={() => {
                  window.open(
                    "https://pub-6c52100fa9ac41f681f0713eac878541.r2.dev/app-prod-release.apk",
                    "_blank",
                  );
                }}
              >
                <img src={android} alt="" />
                Download APK
              </Button>
            )}
        </div>
      </div>
      <Popup
        close
        title="Scan to download"
        fixed={false}
        opened={openDownload}
        onClose={() => setOpenDownload(false)}
      >
        <Download />
      </Popup>
    </div>
  );
}

export function AppleImg2({
  className,
  ...props
}: React.DetailedHTMLProps<
  React.ImgHTMLAttributes<HTMLImageElement>,
  HTMLImageElement
>) {
  return (
    <img
      alt={"apple"}
      className={clsx("dark:uikit-invert", className)}
      src={appleIcon2}
      {...props}
    />
  );
}

export function LockIcon({ ...props }: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="150"
      height="150"
      viewBox="0 0 150 150"
      fill="none"
      {...props}
    >
      <rect width="150" height="150" fill="var(--uikit-background)" />
      <path
        d="M117.182 58.6673C117.182 35.1028 98.2963 16 74.9999 16C51.7036 16 32.8181 35.1028 32.8181 58.6673C32.8181 92.7973 32.8181 89.4305 32.8181 123.564H117.182C117.171 89.43 117.182 92.8001 117.182 58.6673Z"
        fill="var(--uikit-font-color-E2E7F2)"
      />
      <path
        d="M105.582 59.609C105.582 42.5132 91.8899 28.6543 75 28.6543C58.1102 28.6543 44.4182 42.5132 44.4182 59.609C44.4182 84.37 44.4182 81.9274 44.4182 106.691H105.582C105.574 81.927 105.582 84.372 105.582 59.609Z"
        fill="var(--uikit-background)"
      />
      <rect
        x="17"
        y="76"
        width="116"
        height="56.9455"
        fill="var(--uikit-font-color-E2E7F2)"
      />
      <rect
        x="125"
        y="95"
        width="8"
        height="20"
        fill="var(--uikit-background)"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M75 23.3818V60.2907H39.1455V59.3562C39.1455 39.4881 55.1981 23.3819 75 23.3818Z"
        fill="var(--uikit-background)"
      />
      <path
        d="M98.7331 58.9753C98.7331 45.7239 87.9907 34.9814 74.7392 34.9814C61.4878 34.9814 50.7454 45.7239 50.7454 58.9753C50.7454 78.1683 50.7454 76.275 50.7454 95.4697H98.7331C98.7267 76.2747 98.7331 78.1699 98.7331 58.9753Z"
        fill="#56F1D2"
      />
      <rect
        x="32.8181"
        y="76.251"
        width="84.3636"
        height="56.9455"
        fill="#FF75C8"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M98.7319 76.1094H50.7454V107.604H98.7331C98.7288 97.6056 98.7303 87.6072 98.7317 77.6089C98.7318 77.1091 98.7318 76.6092 98.7319 76.1094Z"
        fill="var(--uikit-font-color-12122A)"
      />
      <path
        d="M60 89L70 95"
        stroke="var(--uikit-background)"
        strokeWidth="3"
        strokeLinecap="square"
      />
      <path
        d="M70 89L60 95"
        stroke="var(--uikit-background)"
        strokeWidth="3"
        strokeLinecap="square"
      />
      <path
        d="M65 86V98"
        stroke="var(--uikit-background)"
        strokeWidth="3"
        strokeLinecap="square"
      />
      <path
        d="M80 89L90 95"
        stroke="var(--uikit-background)"
        strokeWidth="3"
        strokeLinecap="square"
      />
      <path
        d="M90 89L80 95"
        stroke="var(--uikit-background)"
        strokeWidth="3"
        strokeLinecap="square"
      />
      <path
        d="M85 86V98"
        stroke="var(--uikit-background)"
        strokeWidth="3"
        strokeLinecap="square"
      />
    </svg>
  );
}