import { Address } from "@/components/shared/types"
import { MorphoYieldAutomationLog } from "../types"
import * as S from "./styles"
import { useThemeContext } from "@/providers/themeProvider"
import {
  ContentWrapper,
  FlexContainer,
  InfoLinkTag,
  InformationBar,
  LogoViewer,
  Typography,
} from "@/components/shared/components"
import TextWithTooltip from "@/components/shared/components/TextWithTooltip"
import { formatAmountWithOptions, truncateString } from "@/utils"
import { getBaseChainScanLink } from "../utils"

type TransactionHistoryProps = {
  history: MorphoYieldAutomationLog[]
  vaultsMapping?: Map<Address, any>
}

export default function TransactionHistory({
  vaultsMapping,
  history,
}: TransactionHistoryProps) {
  const { theme } = useThemeContext()

  return (
    <FlexContainer
      gap={1.6}
      flexDirection="column"
      width={100}
      padding="2rem 0"
    >
      <InformationBar>
        View your agent's rebalancing history here. Rebalances occur at your set
        intervals, but only when better yields are found that match your
        preferences.
      </InformationBar>
      <FlexContainer
        borderColor={theme.colors.gray700}
        bgColor={theme.colors.black}
        borderRadius={0.8}
        gap={0.2}
        width={100}
        style={{ overflow: "clip" }}
        // padding="0 0.6rem 0 0"
      >
        <S.StyledTransactionHistory
          style={{
            padding: `${
              history.length > 0 ? "0.2rem 0.4rem 0.2rem 0.2rem" : "0.2rem"
            }`,
          }}
        >
          {history.length > 0 ? (
            history.map((historyItem) => (
              <HistoryItem
                vaultsMapping={vaultsMapping}
                key={historyItem.id}
                {...historyItem}
              />
            ))
          ) : (
            <ContentWrapper>
              <FlexContainer justifyContent="center">
                <Typography type="TITLE_XS" color={theme.colors.gray300}>
                  No history
                </Typography>
              </FlexContainer>
            </ContentWrapper>
          )}
        </S.StyledTransactionHistory>
      </FlexContainer>
    </FlexContainer>
  )
}

function HistoryItem({
  name,
  asset,
  amount,
  time,
  fromVault,
  toVault,
  vaultsMapping,
  outputTxHash,
}: MorphoYieldAutomationLog & {
  vaultsMapping?: Map<Address, any>
}) {
  const { theme } = useThemeContext()
  //   const fromVaultInfo = vaultsMapping.get(fromVault);
  //   const toVaultInfo = toVault ? vaultsMapping.get(toVault) : null;
  const fromVaultInfo = null
  const toVaultInfo = null

  return (
    <ContentWrapper padding="2rem 1.6rem">
      <FlexContainer
        flexDirection="column"
        gap={1.2}
        width={100}
        style={{ boreder: "1px solid red" }}
      >
        <FlexContainer justifyContent="space-between" width={100}>
          <FlexContainer gap={0.8}>
            <TextWithTooltip
              text={name}
              type="TITLE_XS"
              color={theme.colors.gray300}
            />

            <FlexContainer gap={0.4} alignItems="center">
              <LogoViewer logo={asset.logo} />
              <FlexContainer gap={0.2} alignItems="center">
                <Typography type="TITLE_XS" color={theme.colors.gray300}>
                  {formatAmountWithOptions(amount, {
                    maximumFractionDigits: 6,
                  })}
                </Typography>
                <Typography type="TITLE_XS" color={theme.colors.gray300}>
                  {asset.name}
                </Typography>
              </FlexContainer>
            </FlexContainer>
          </FlexContainer>
          <InfoLinkTag
            content={truncateString(outputTxHash)}
            textToCopy={outputTxHash}
            link={getBaseChainScanLink(outputTxHash, asset.chainId, "tx")}
          />
        </FlexContainer>

        <FlexContainer justifyContent="space-between" width={100}>
          {/* <FlexContainer gap={0.4} alignItems="center">
            {fromVaultInfo ? (
              <Typography type="TITLE_XS" color={theme.colors.gray400}>
                {fromVaultInfo.name}
              </Typography>
            ) : (
              <InfoLinkTag
                content={truncateString(fromVault)}
                textToCopy={fromVault}
              />
            )}

            <LogoViewer size={20} logo={fromVaultInfo?.metadata?.image} />

            {toVault && (
              <>
                <NewArrowForwardIcon
                  height={16}
                  width={16}
                  color={theme.colors.gray400}
                />
                {toVaultInfo ? (
                  <TruncatedTooltipText
                    text={toVaultInfo.name}
                    textStyles={{
                      type: "TITLE_XS",
                      color: theme.colors.gray400,
                    }}
                  />
                ) : (
                  <InfoLinkTag
                    content={truncateString(toVault)}
                    textToCopy={toVault}
                  />
                )}

                <LogoViewer size={20} logo={toVaultInfo?.metadata?.image} />
              </>
            )}
          </FlexContainer> */}
          <Typography type="TITLE_XS" color={theme.colors.gray400}>
            {time}
          </Typography>
        </FlexContainer>
      </FlexContainer>
    </ContentWrapper>
  )
}