import { useSwapContext } from "@src/contexts";
import { forwardRef, HTMLAttributes, useEffect } from "react";
import { Virtuoso } from "react-virtuoso";
import { YourTokenItem } from "../YourTokenItem";
import { Button, ButtonVariants, Skeleton } from "@src/components";
import { useNavigate } from "react-router-dom";
import { RoutePath } from "@src/interfaces";
import { EnrichedWalletToken } from "@src/models";

type Props = { yourTokens: EnrichedWalletToken[]; isLoading: boolean };

export const YourTokensVirtuoso = ({ yourTokens, isLoading }: Props) => {
  const { balancesSnapshots, setBalancesSnapshots } = useSwapContext();
  const navigate = useNavigate();

  useEffect(() => {
    if (balancesSnapshots && Object.keys(balancesSnapshots).length > 0) {
      const timeout = setTimeout(() => {
        setBalancesSnapshots({});
      }, 2000);

      return () => clearTimeout(timeout);
    }
  }, [balancesSnapshots, setBalancesSnapshots]);

  return (
    <div className="flex-1 flex flex-col">
      <div className="pb-1 flex border-b border-primary_text border-opacity-10">
        <div className="text-text_primary font-normal text-sm opacity-60 px-4">
          Your Tokens
        </div>
      </div>

      {yourTokens.length > 0 ? (
        <Virtuoso
          className="flex-1"
          data={yourTokens}
          itemContent={(_, tokenData) => {
            const key = `${
              tokenData.chainId
            }-${tokenData.address.toLowerCase()}`;

            const prevBalancesSnapshot = balancesSnapshots[key];

            const balance = tokenData.balances.humanReadable || "0";
            const value = tokenData.value.toFixed(2);

            return (
              tokenData && (
                <YourTokenItem
                  key={tokenData.address + tokenData.chainId}
                  token={tokenData}
                  previousAmount={
                    prevBalancesSnapshot?.initialAmount || balance
                  }
                  previousValue={prevBalancesSnapshot?.initialValue || value}
                  currentAmount={balance}
                  currentValue={value}
                />
              )
            );
          }}
          components={{
            List: forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
              ({ style, ...props }, ref) => (
                <div
                  ref={ref}
                  style={{
                    ...style,
                    display: "flex",
                    flexDirection: "column",
                    gap: "4px",
                  }}
                  {...props}
                />
              ),
            ),
          }}
        />
      ) : isLoading ? (
        <div className="flex flex-col gap-2">
          {Array.from({ length: 10 }).map((_, i) => (
            <div className="w-full px-4 pt-2 flex justify-between" key={i}>
              <Skeleton className="w-24 h-8" />
              <div className="flex gap-3 items-center">
                <div className="flex flex-col gap-1 items-end">
                  <Skeleton className="w-12 h-3" />
                  <Skeleton className="w-8 h-3" />
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="flex flex-col gap-2 items-center pt-2">
          <div className="text-sm text-text_primary text-opacity-60">
            You dont't have any tokens yet, start investing now!
          </div>
          <Button
            variant={ButtonVariants.Primary}
            onClick={() => navigate(RoutePath.Buy)}
          >
            Buy
          </Button>
        </div>
      )}
    </div>
  );
};