import { useEffect, useState } from "react";
import { SocialItemProps, WalletItemProps } from "../type";
import { cn } from "../utils";
import { isIOS as detectIsIOS, isPcBrowser } from "../utils/device";

import Divider from "./Divider";
import Form from "./Form";
import SocialLogin from "./SocialLogin";
import WalletSelector from "./WalletSelector";

interface IProps {
  socialOptions?: SocialItemProps[];
  walletOptions?: WalletItemProps[];

  onClickInputArrow?: (email: string) => void;
  onClickMainButton: (email: string) => void;
  onClickSocialItem?: (socialItem: SocialItemProps, index: number) => void;
  onClickWalletItem?: (wallet: WalletItemProps, index: number) => void;
  defaultSelect?: string;
  show?: boolean;
  showEmail?: boolean;
  connected?: boolean;
  loadingIconKey?: string;
  btnStyle?: {
    textColor?: string;
    bgColor?: string;
  };
  socialsFirst?: boolean;
}

const ConnectMain = ({
  socialOptions = [],
  walletOptions = [],
  onClickInputArrow,
  onClickMainButton,
  onClickSocialItem,
  onClickWalletItem,
  show = true,
  showEmail = true,
  connected = false,
  loadingIconKey,
  btnStyle,
  socialsFirst = true,
}: IProps) => {
  const [isFocus, setIsFocus] = useState(false);
  const [showConnectors, setShowConnectors] = useState(true);
  const [isIOS, setIsIOS] = useState(false);
  const showSocialLogin = !!socialOptions?.length;

  useEffect(() => {
    // if is not focused or is pc, then show connectors
    setShowConnectors(!isFocus || isPcBrowser());
  }, [isFocus]);
  useEffect(() => {
    // detect if is IOS
    setIsIOS(detectIsIOS());
  }, []);

  const handleSocialLogin = (socialItem: SocialItemProps, index: number) => {
    onClickSocialItem?.(socialItem, index);
  };

  const handleWalletSelect = (wallet: WalletItemProps, index: number) => {
    onClickWalletItem?.(wallet, index);
  };

  return (
    <div
      className={cn("uikit-select-none uikit-pb-2 uikit-t-2", {
        "uikit-hidden": !show,
        "uikit-h-[440px]": isFocus && isIOS,
      })}
    >
      {!socialsFirst && !!walletOptions?.length && (
        <WalletSelector
          walletList={walletOptions}
          handleClick={handleWalletSelect}
          loadingIconKey={loadingIconKey}
          socialsFirst={socialsFirst}
        />
      )}

      <div className="uikit-pt-2"></div>

      {showEmail && (
        <div className="uikit-px-5">
          <Form
            connected={connected}
            onFocus={setIsFocus}
            handleEmailNextClick={onClickInputArrow}
            handleContinueClick={onClickMainButton}
            btnStyle={btnStyle}
          />
        </div>
      )}

      {showSocialLogin && (
        <Divider
          className="uikit-px-5 uikit-pt-[18px] uikit-pb-5"
          content="or continue with"
        />
      )}

      <div
        id="tomo-modal-connectors"
        className={cn({
          "uikit-invisible": !showConnectors,
          "uikit-pb-6": !socialsFirst,
        })}
      >
        {showSocialLogin && (
          <div
            className={`uikit-px-5 uikit-popup-prevent-scroll ${!walletOptions?.length ? "uikit-pb-[22px]" : ""}`}
          >
            <SocialLogin
              socialOptions={socialOptions}
              handleClick={handleSocialLogin}
            />
          </div>
        )}

      </div>

      {socialsFirst && !!walletOptions?.length && (
        <>
          <Divider
            className="uikit-px-5 uikit-pt-5 uikit-pb-3"
            content="or connect a wallet"
          />

          <WalletSelector
            walletList={walletOptions}
            handleClick={handleWalletSelect}
            loadingIconKey={loadingIconKey}
            socialsFirst={socialsFirst}
          />
        </>
      )}

      <div
        id="tomo-modal-ios-placeholder"
        className={cn({
          // show if is IOS and connector is hidden
          "uikit-hidden": !(isIOS && !showConnectors),
        })}
        style={{ height: 80 }}
      />
    </div>
  );
};

export default ConnectMain;