import React from "react"
import Link from "next/link"
import Image from "next/image"
import { useAccount } from "wagmi"
import styled from "styled-components"
import { useConnectModal } from "@rainbow-me/rainbowkit"

import {
  Button,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  Modal,
  Typography,
} from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"
import nftImage from "@/icons/nft.png"
import { LinkIcon } from "@/icons"
import { truncateString } from "@/utils"
import { BRAHMA_DISCORD_LINK } from "@/components/shared/constants"

function NftGatingModal({ loading }: { loading: boolean }) {
  const { theme } = useThemeContext()
  const { address } = useAccount()
  const { openConnectModal } = useConnectModal()

  return (
    <Modal isOpen>
      <FlexContainer flexDirection="column" gap={1.6}>
        <GrayBoundaryBlackWrapper padding="0.4rem">
          <FlexContainer
            bgColor={theme.colors.gray700}
            width={100}
            borderRadius={1.6}
            justifyContent="center"
          >
            <FlexContainer flexDirection="column" gap={0.8}>
              <FlexContainer
                width={100}
                justifyContent="center"
                padding="0.8rem 0.8rem 0rem 0.8rem"
              >
                <Typography textAlign="center" type="BODY_MEDIUM_M">
                  {address && loading
                    ? "Checking Eligibility ..."
                    : "You need an early access NFT to access this agent."}
                </Typography>
              </FlexContainer>

              <FlexContainer padding="0.4rem">
                <Image
                  src={nftImage.src}
                  width={450}
                  height={450}
                  style={{
                    borderRadius: "0.8rem",
                  }}
                  alt="nft"
                />
              </FlexContainer>

              <FlexContainer
                alignItems="center"
                justifyContent="center"
                width={100}
                padding="0rem 1rem 1rem 1rem"
              >
                {address ? (
                  <Typography
                    style={{
                      width: "40rem",
                    }}
                    type="BODY_MEDIUM_M"
                    textAlign="center"
                  >
                    This strategy is powered by an exclusive Brahma Agent and is
                    available only to users holding the Founder's or Explorer
                    Pass NFT.
                  </Typography>
                ) : (
                  <Button
                    buttonSize="L"
                    onClick={openConnectModal}
                    buttonType="white"
                  >
                    Connect Wallet
                  </Button>
                )}
              </FlexContainer>
            </FlexContainer>
          </FlexContainer>
        </GrayBoundaryBlackWrapper>

        <GrayBoundaryBlackWrapper padding="0.4rem">
          <FlexContainer
            bgColor={theme.colors.gray700}
            width={100}
            borderRadius={1.6}
            justifyContent="center"
            padding="1.6rem"
            flexDirection="column"
            style={{
              width: "45.8rem",
            }}
          >
            <Typography type="BODY_MEDIUM_M">
              Don't have the NFT?{" "}
              {address && `| Connected Wallet: ${truncateString(address)}`}
            </Typography>
            <Typography type="BODY_MEDIUM_S" color={theme.colors.gray400}>
              To access this Morpho Agent, you need the NFT. Reach out on our
              Discord to get yours.
            </Typography>
          </FlexContainer>

          <FlexContainer
            bgColor={theme.colors.gray700}
            width={100}
            borderRadius={1.6}
            justifyContent="center"
            padding="1.6rem"
          >
            <Link
              style={{
                width: "100%",
              }}
              target="_blank"
              href={BRAHMA_DISCORD_LINK}
            >
              <Button
                buttonSize="L"
                style={{
                  gap: "0.4rem",
                }}
                buttonType="white"
              >
                Get NFT
                <LinkIcon color="black" />
              </Button>
            </Link>
          </FlexContainer>
        </GrayBoundaryBlackWrapper>
      </FlexContainer>
    </Modal>
  )
}

export default NftGatingModal

const StyledTitle = styled(Typography)`
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  text-align: center;
`