import React from "react";

import { Popup } from "../Popup";
import ConnectedHeader from "./ConnectedHeader/ConnectedHeader";
import { AccountInfoProps } from "./ConnectedMain/AccountInfo";
import ConnectedMain from "./ConnectedMain/ConnectedMain";
import { NetworkOption } from "./ConnectedMain/NetworkPopup";
import { Theme } from "./const";

interface PropsType {
  className?: string;
  theme?: Theme;
  fixed?: boolean;
  opened: boolean;
  onClose?: () => void;
  onBack?: () => void;
  title?: string;
  renderTitle?: React.ReactNode;
  back?: boolean; // show back icon on left top
  close?: boolean; // show close icon on right top
  children?: React.ReactNode;
  isLoading?: boolean;
  header?: React.ReactNode;
  bodyClassName?: string;
  bodyStyle?: React.CSSProperties;

  showSetting?: boolean;
  accountInfo: AccountInfoProps;
  selectedNetwork: NetworkOption;
  networkOptions: NetworkOption[];
  onNetworkSwitch: () => void;
  onLogout: () => void;
  onChangePayPin?: () => void;
}

const ConnectedModal = ({
  title,
  theme = Theme.LIGHT,
  opened,
  close,
  back,
  onClose,
  onBack,
  isLoading,
  accountInfo,
  showSetting,
  selectedNetwork,
  networkOptions,
  onLogout,
  onNetworkSwitch,
  onChangePayPin,
}: PropsType) => {
  return (
    <Popup
      theme={theme}
      title={title}
      back={back}
      close={close}
      opened={opened}
      isLoading={isLoading}
      onClose={onClose}
      onBack={onBack}
      renderTitle={
        <ConnectedHeader
          selectedNetwork={selectedNetwork}
          networkOptions={networkOptions}
          onLogout={onLogout}
          onNetworkSwitch={onNetworkSwitch}
        />
      }
    >
      <ConnectedMain
        showSetting={showSetting}
        accountInfo={accountInfo}
        onChangePayPin={onChangePayPin}
      />
    </Popup>
  );
};

export default ConnectedModal;