/* eslint-disable @typescript-eslint/no-unused-vars */
import { useRoutes } from '../../hooks/useRoutes.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { Box, Typography, Avatar } from '@mui/material';
import type { CardProps } from '../Card/Card.js';
import { Card } from '../Card/Card.js';
import { CardTitle } from '../Card/CardTitle.js';
import numeral from 'numeral';
import { useAccount } from '../../hooks/useAccount.js';
import { useChain } from '../../hooks/useChain.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { useMemo } from 'react';
import { FormKeyHelper } from '../../stores/form/types.js';
import { ChainId } from '../../types/base.js';

export const RewardSwap: React.FC<CardProps> = (props) => {
  const { rewardSwapData } = useWidgetConfig();
  const { routes } = useRoutes();
  const currentRoute = routes?.[0];
  const [fromChainId] = useFieldValues('fromChain');
  const { chain } = useChain(fromChainId);
  const { account } = useAccount({ chainType: chain?.chainType });
  const [chainId] = useFieldValues(FormKeyHelper.getChainKey('from'));

  const formatRewardSwapData =
    useMemo(() => {
      const GMPOINTReward =
        rewardSwapData?.filter((item) => item.type === 'GM_POINT') || [];

      if (account.isConnected) {
        if (account.chainType === 'EVM') {
          return rewardSwapData;
        }

        if (account.chainType === 'SVM') {
          return rewardSwapData
            ?.filter((item) => item.chain === 'SVM')
            ?.concat(GMPOINTReward);
        }

        if (account.chainType === 'ECLIPSE') {
          return rewardSwapData
            ?.filter((item) => item.chain === 'ECLIPSE')
            ?.concat(GMPOINTReward);
        }

        if (account.chainType === 'MVM') {
          return rewardSwapData
            ?.filter((item) => item.chain === 'SUI')
            ?.concat(GMPOINTReward);
        }

        if (account.chainType === 'TVM') {
          return rewardSwapData
            ?.filter((item) => item.chain === 'TON')
            ?.concat(GMPOINTReward);
        }
      } else {
        if (chainId === ChainId.MOVE) {
          return rewardSwapData
            ?.filter((item) => item.chain === 'SUI')
            ?.concat(GMPOINTReward);
        } else if (chainId === ChainId.TON) {
          return rewardSwapData
            ?.filter((item) => item.chain === 'TON')
            ?.concat(GMPOINTReward);
        } else if (chainId === ChainId.ECLIPSE) {
          return rewardSwapData
            ?.filter((item) => item.chain === 'ECLIPSE')
            ?.concat(GMPOINTReward);
        } else if (chainId === ChainId.SOL) {
          return rewardSwapData
            ?.filter((item) => item.chain === 'SOL')
            ?.concat(GMPOINTReward);
        } else {
          return rewardSwapData;
        }
      }
    }, [chainId, account, rewardSwapData]) || [];

  if (rewardSwapData && rewardSwapData.length > 0) {
    return (
      <Card {...props}>
        <CardTitle>Rewards</CardTitle>
        <Box p={2}>
          <Box
            sx={{
              display: 'grid',
              gridTemplateColumns: 'repeat(1, 1fr)',
              gap: 2,
            }}
          >
            {formatRewardSwapData.map((item, index) => (
              <Box
                key={index}
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1,
                  flexWrap: 'wrap',
                }}
              >
                <Avatar
                  src={item.logo}
                  alt={item.symbol}
                  sx={{ width: 24, height: 24 }}
                />
                <Typography fontWeight="600">{item.symbol}</Typography>
                {!!item.amount && !!currentRoute?.fromAmountUSD && (
                  <Typography
                    fontSize={14}
                    style={{ opacity: '0.56' }}
                    fontWeight={600}
                  >
                    {numeral(
                      Number(currentRoute.fromAmountUSD) * Number(item.amount),
                    ).format('0,0.00')}
                  </Typography>
                )}
              </Box>
            ))}
          </Box>
        </Box>
      </Card>
    );
  }

  return null;
};