import Popup from "../Popup/Popup";
import ConnectMain from "./Connect/Connect";
import { Theme } from "./const";
import { SocialItemProps, WalletItemProps } from "./type";

export interface PropsType {
  opened: boolean;
  title: string;
  close?: boolean; // show close icon on right top
  back?: boolean; // show back icon on left top
  isLoading?: boolean;
  theme?: Theme;
  connected?: boolean;

  socialOptions?: SocialItemProps[];
  walletOptions?: WalletItemProps[];

  onClickInputArrow?: (email: string) => void;
  onClickMainButton: (email: string) => void;
  onClickSocialItem?: (socialItem: SocialItemProps, index: number) => void;
  onClickWalletItem?: (wallet: WalletItemProps, index: number) => void;

  onClose: (fn?: () => void) => void;
  onBack?: () => void;
  socialsFirst?: boolean;
}

const ConnectModal = ({
  opened,
  title,
  close,
  back,
  theme,
  isLoading,
  connected = false,
  socialOptions,
  walletOptions,
  onClose,
  onBack,
  onClickInputArrow,
  onClickMainButton,
  onClickSocialItem,
  onClickWalletItem,
  socialsFirst = true,
}: PropsType) => {
  return (
    <Popup
      theme={theme}
      title={title}
      back={back}
      close={close}
      opened={opened}
      isLoading={isLoading}
      onClose={onClose}
      onBack={onBack}
    >
      <ConnectMain
        connected={connected}
        socialOptions={socialOptions}
        walletOptions={walletOptions}
        onClickInputArrow={onClickInputArrow}
        onClickMainButton={onClickMainButton}
        onClickSocialItem={onClickSocialItem}
        onClickWalletItem={onClickWalletItem}
        socialsFirst={socialsFirst}
      />
    </Popup>
  );
};

export default ConnectModal;