import { getBaseChainScanLink } from "@/components/morphoStrategy/utils"
import {
  ContentWrapper,
  FlexContainer,
  FormattedAmount,
  GrayBoundaryBlackWrapper,
  InfoLinkTag,
  LogoViewer,
  Typography,
} from "@/components/shared/components"
import { BASE_CHAIN_ID } from "@/constants"
import { useThemeContext } from "@/providers/themeProvider"
import { truncateString } from "@/utils"
import { Trade } from "../../types"
import { useIsMobile } from "@/hooks/use-is-mobile"
import { getChainIcon } from "@/components/shared/components/LogoViewer"

type TradesViewProps = {
  trades: Trade[]
  loading: boolean
}

export default function TradesView({ trades, loading }: TradesViewProps) {
  const { theme } = useThemeContext()

  return (
    <FlexContainer flex={false} gap={1} flexDirection="column" width={100}>
      <Typography type="BODY_MEDIUM_S">Trades</Typography>

      {loading ? (
        <Typography type="BODY_MEDIUM_M" color={theme.colors.gray500}>
          Fetching trades ...
        </Typography>
      ) : trades.length > 0 ? (
        <FlexContainer
          padding="0.4rem"
          borderRadius={0.8}
          bgColor={theme.colors.black}
          borderColor={theme.colors.gray600}
          width={100}
          style={{
            maxHeight: "280px",
            overflowY: "auto",
            scrollbarWidth: "none",
            msOverflowStyle: "none",
          }}
        >
          <GrayBoundaryBlackWrapper padding="0" style={{ border: "none" }}>
            {trades.map((trade) => {
              return <TradeItem key={trade.txnHash} trade={trade} />
            })}
          </GrayBoundaryBlackWrapper>
        </FlexContainer>
      ) : (
        <Typography type="BODY_MEDIUM_M" color={theme.colors.gray500}>
          No trades found
        </Typography>
      )}
    </FlexContainer>
  )
}

function TradeItem({ trade }: { trade: Trade }) {
  const { theme } = useThemeContext()

  const isMobile = useIsMobile()
  const { date, tokenInData, tokenOutData, txnHash } = trade

  return (
    <ContentWrapper padding="1.6rem">
      <FlexContainer gap={1.6} flexDirection="column" width={100}>
        <FlexContainer
          gap={0.8}
          width={100}
          justifyContent="space-between"
          flexDirection={isMobile ? "column" : "row"}
        >
          <FlexContainer width={100} justifyContent="space-between">
            <Typography type="BODY_MEDIUM_S">{"Swap"}</Typography>
            <FlexContainer gap={1.6} flex={false} alignItems="center">
              {!isMobile && (
                <Typography type="BODY_MEDIUM_S" color={theme.colors.gray200}>
                  {date}
                </Typography>
              )}
              <InfoLinkTag
                leftIcon={getChainIcon(BASE_CHAIN_ID, 20)}
                content={truncateString(txnHash)}
                link={getBaseChainScanLink(txnHash, BASE_CHAIN_ID, "tx")}
                textToCopy={getBaseChainScanLink(txnHash, BASE_CHAIN_ID, "tx")}
              />
            </FlexContainer>
          </FlexContainer>
          {isMobile && (
            <Typography color={theme.colors.gray200} type="BODY_MEDIUM_S">
              {date}
            </Typography>
          )}
        </FlexContainer>

        <FlexContainer gap={0.4} flexDirection="column" width={100}>
          <FlexContainer justifyContent="space-between" width={100}>
            <FlexContainer gap={0.6}>
              <LogoViewer logo={tokenOutData.asset.logo} />
              <Typography type="BODY_S" color={theme.colors.gray200}>
                {tokenOutData.asset.name}
              </Typography>
            </FlexContainer>
            <FlexContainer flex={false} alignItems="center" gap={0.2}>
              <Typography type="BODY_S" color={theme.colors.success}>
                +
              </Typography>
              <FormattedAmount
                amount={tokenOutData.amount}
                typographyOptions={{
                  type: "BODY_S",
                  color: theme.colors.success,
                }}
              />
            </FlexContainer>
          </FlexContainer>

          <FlexContainer justifyContent="space-between" width={100}>
            <FlexContainer gap={0.6}>
              <LogoViewer logo={tokenInData.asset.logo} />
              <Typography type="BODY_S" color={theme.colors.gray200}>
                {tokenInData.asset.name}
              </Typography>
            </FlexContainer>
            <FlexContainer flex={false} alignItems="center" gap={0.2}>
              <Typography type="BODY_S" color={theme.colors.error}>
                -
              </Typography>
              <FormattedAmount
                amount={tokenInData.amount}
                typographyOptions={{
                  type: "BODY_S",
                  color: theme.colors.error,
                }}
              />
            </FlexContainer>
          </FlexContainer>
        </FlexContainer>
      </FlexContainer>
    </ContentWrapper>
  )
}