import React, { useEffect } from "react"

import {
  Modal,
  Button,
  Typography,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  ActionIconWrapper,
  ContentWrapper,
} from "@/components/shared/components"
import { CloseIcon } from "@/icons"
import { useThemeContext } from "@/providers/themeProvider"
import BrahmaTechDiagramIcon from "@/icons/BrahmaTechDiagramIcon"
import { openInNewTab } from "@/utils"
import { Address } from "@/components/shared/types"

export default function ExploreBrahmaAccountModal({
  closeModal,
  consoleAddress,
}: {
  consoleAddress: Address
  closeModal: () => void
}) {
  const { theme } = useThemeContext()

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        closeModal()
      }
    }
    window.addEventListener("keydown", handleKeyPress)
    return () => {
      window.removeEventListener("keydown", handleKeyPress)
    }
  }, [closeModal])

  return (
    <Modal isCenterAligned={false} overlay top={10} isOpen>
      <FlexContainer
        style={{
          width: "62.8rem",
        }}
        width={100}
        flexDirection="column"
        gap={0.4}
      >
        <FlexContainer
          alignItems="center"
          justifyContent="space-between"
          width={100}
          padding="0.4rem"
        >
          <FlexContainer gap={1.2} alignItems="center">
            <Typography type="TITLE_M" color={theme.colors.white}>
              You are entering Brahma Account to Claim Rewards
            </Typography>
          </FlexContainer>
          <ActionIconWrapper size="L" onClick={closeModal}>
            <CloseIcon width={16} />
          </ActionIconWrapper>
        </FlexContainer>

        <FlexContainer flexDirection="column" gap={1.2} width={100}>
          <GrayBoundaryBlackWrapper padding="0.4rem">
            <FlexContainer justifyContent="center" width={100}>
              <BrahmaTechDiagramIcon />
            </FlexContainer>

            <FlexContainer
              bgColor={theme.colors.gray700}
              width={100}
              padding="1.2rem"
              justifyContent="center"
              flexDirection="column"
              gap={0.8}
            >
              <FlexContainer alignItems="center" gap={0.8}>
                <Typography type="TITLE_M" color="white">
                  About Brahma Account
                </Typography>
              </FlexContainer>
              <FlexContainer gap={0.8} flexDirection="column">
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Brahma is a one stop account you need to carry-out your
                  on-chain activities
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Manage your Agent Positions from Brahma Account
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; You can create & execute on-chain automations &
                  strategies with Brahma Account
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Multi-chain support so you never miss on opportunities
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Leverage Brahma Connect to open any dapp on your Brahma
                  Account
                </Typography>
              </FlexContainer>
            </FlexContainer>

            <ContentWrapper padding="0.8rem">
              <Button
                onClick={() => {
                  openInNewTab(
                    `https://console.brahma.fi/account/${consoleAddress}`,
                  )
                }}
                buttonSize="L"
                buttonType="white"
              >
                Explore Brahma Rewards
              </Button>
            </ContentWrapper>
          </GrayBoundaryBlackWrapper>
        </FlexContainer>
      </FlexContainer>
    </Modal>
  )
}