// ExitModal.tsx
import React from "react"
import { Address } from "brahma-console-kit"
import { useAccount } from "wagmi"

import {
  Button,
  ClosableModalWrapper,
  FlexContainer,
  Modal,
  Typography,
} from "@/components/shared/components"
import { truncateString } from "@/utils"
import { useThemeContext } from "@/providers/themeProvider"
import { TAsset } from "@/types"
import { useIsMobile } from "@/hooks/use-is-mobile"
import useWithdraw from "../hooks/useWithdraw"

type ExitModalProps = {
  title: string
  buttonText: string
  targetToken: TAsset
  allocatedToken: TAsset
  subAccountAddress: Address
  closeExitModal: () => void
}

function ExitModal({
  title,
  buttonText,
  targetToken,
  allocatedToken,
  subAccountAddress,
  closeExitModal,
}: ExitModalProps) {
  const { address } = useAccount()
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()

  const { handleWithdrawAmount, isWithdrawLoading } = useWithdraw({
    targetToken,
    allocatedToken,
    subAccountAddress,
    closeExitModal,
  })

  return (
    <Modal isOpen onClickOutside={closeExitModal}>
      <ClosableModalWrapper
        title="Confirm cancellation"
        closeButtonClick={closeExitModal}
      >
        <FlexContainer
          gap={4.8}
          padding="2.4rem 1.6rem 1.6rem 1.6rem"
          flexDirection="column"
        >
          <FlexContainer
            flexDirection="column"
            gap={0.8}
            width={100}
            alignItems="center"
          >
            <Typography
              textAlign="center"
              type="TITLE_S"
              color={theme.colors.gray100}
            >
              {title}
            </Typography>
            <Typography
              textAlign="center"
              type="BODY_S"
              color={theme.colors.gray400}
            >
              Remaining {allocatedToken.name} and {targetToken.name} assets will
              be <br />
              automatically sent to your [
              {address ? truncateString(address) : ""}] wallet.
            </Typography>
          </FlexContainer>
          <FlexContainer
            flexDirection={isMobile ? "column" : "row"}
            width={100}
            gap={1.2}
          >
            <Button
              buttonType="secondary"
              buttonSize="L"
              onClick={closeExitModal}
            >
              Cancel
            </Button>
            <Button
              buttonType="danger"
              buttonSize="L"
              onClick={handleWithdrawAmount}
              disabled={isWithdrawLoading}
            >
              {buttonText}
            </Button>
          </FlexContainer>
        </FlexContainer>
      </ClosableModalWrapper>
    </Modal>
  )
}

export default ExitModal