import {
  Button,
  ContentWrapper,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  InfoLinkTag,
  LogoViewer,
  TooltipBox,
  Typography,
} from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"

import { truncateString } from "@/utils"
import { MorphoYieldUserPosition } from "../../types"
import { frequencyOptions } from "../../constants"
import {
  getBaseChainScanLink,
  getFormattedDate,
  getNextExecutionTime,
} from "../../utils"

type WithdrawSectionProps = {
  userPositionData: MorphoYieldUserPosition
  onWithdrawClick: () => void
}

export const MAX_VAULT_NAME_CHAR = 7

export default function MinimalWithdrawView({
  onWithdrawClick,
  userPositionData,
}: WithdrawSectionProps) {
  const { theme } = useThemeContext()
  const { tokenData } = userPositionData
  const {
    duration,
    subAccountAddress,
    chainId,
    tokenData: { amount, asset },
    createdAt,
    metadata,
    vaultPositionData,
  } = userPositionData
  const frequencyItem = frequencyOptions.find(
    (frequncy) => frequncy.value === metadata.every.toString(),
  )

  const nextExecutionTime = getNextExecutionTime(createdAt, Number(duration))
  const vaultName = vaultPositionData?.vaultName
  const curatorName = vaultPositionData?.curator?.name
    ? `by ${vaultPositionData?.curator?.name}`
    : ""

  return (
    <>
      {/* <ContentWrapper padding="1.2rem">
        <FlexContainer justifyContent="space-between">
          <FlexContainer gap={0.8} alignItems="center">
            <LogoViewer size={32} logo={tokenData.asset.logo} />
            <Typography type="TITLE_S" color={theme.colors.white}>
              {amount}&nbsp;
              {asset.name}
            </Typography>
          </FlexContainer>
        </FlexContainer>
      </ContentWrapper> */}

      <ContentWrapper padding="1.2rem">
        <FlexContainer gap={1.2} flexDirection="column" width={100}>
          <FlexContainer justifyContent="space-between" width={100}>
            <Typography type="BODY_MEDIUM_S" color={theme.colors.gray400}>
              Rebalance frequency
            </Typography>
            <Typography type="BODY_MEDIUM_S" color={theme.colors.white}>
              {frequencyItem?.label}
            </Typography>
          </FlexContainer>

          <FlexContainer justifyContent="space-between" width={100}>
            <Typography type="BODY_MEDIUM_S" color={theme.colors.gray400}>
              Expected rebalance
            </Typography>
            <Typography type="BODY_MEDIUM_S" color={theme.colors.white}>
              {getFormattedDate(nextExecutionTime, {
                year: "numeric",
                month: "short",
                day: "numeric",
              })}
            </Typography>
          </FlexContainer>

          <FlexContainer justifyContent="space-between" width={100}>
            <Typography type="BODY_MEDIUM_S" color={theme.colors.gray400}>
              Agent contract
            </Typography>
            <InfoLinkTag
              content={truncateString(subAccountAddress, 3, 3)}
              link={getBaseChainScanLink(subAccountAddress, chainId)}
              textToCopy={subAccountAddress}
            />
          </FlexContainer>
        </FlexContainer>
      </ContentWrapper>

      <ContentWrapper padding="1.6rem">
        <FlexContainer
          justifyContent="space-between"
          width={100}
          alignItems="center"
        >
          <Typography type="BODY_MEDIUM_S" color={theme.colors.gray400}>
            Allocated Vault
          </Typography>
          <FlexContainer flex={false} gap={0.8} alignItems="center">
            <LogoViewer size={32} logo={tokenData.asset.logo} />
            {vaultName ? (
              // <Typography type="TITLE_S" color={theme.colors.white}>
              //   {vaultName}
              // </Typography>
              <>
                {MAX_VAULT_NAME_CHAR &&
                vaultName.length > MAX_VAULT_NAME_CHAR ? (
                  <FlexContainer alignItems="center" gap={0.2} flex={false}>
                    <TooltipBox content={`${vaultName} ${curatorName}`}>
                      <Typography type="TITLE_S" color={theme.colors.white}>
                        {vaultName + " ..."}
                      </Typography>
                    </TooltipBox>
                  </FlexContainer>
                ) : (
                  <Typography type="TITLE_S" color={theme.colors.white}>
                    {vaultName} {curatorName}
                  </Typography>
                )}
              </>
            ) : (
              <InfoLinkTag
                toolTipDirection="top"
                content="Your Agent is deploying"
                toolTipContent="Please wait while your agent deploys (typically 2-5 minutes). Your position will appear automatically once ready."
              />
            )}
          </FlexContainer>
        </FlexContainer>
      </ContentWrapper>
    </>
  )
}