import { useChain } from '../../hooks/useChain.js';
import { useToken } from '../../hooks/useToken.js';
import type { FormTypeProps } from '../../stores/form/types.js';
import { FormKeyHelper } from '../../stores/form/types.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { AvatarBadgedDefault } from '../Avatar/Avatar.js';
import { TokenAvatar } from '../Avatar/TokenAvatar.js';
import { Box } from '@mui/material';
import { KeyboardArrowDownOutlined } from '@mui/icons-material';
import { alpha, darken, lighten, styled } from '@mui/material';
import { Card } from '../Card/Card.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import mixpanel from 'mixpanel-browser';
import { useNavigate } from 'react-router-dom';
import { navigationRoutes } from '../../utils/navigationRoutes.js';

const TokenSelect = styled(Card)(({ theme }) => {
  return {
    // maxWidth: '140px',
    width: 'max-content',
    display: 'flex',
    alignItems: 'center',
    gap: 4,
    cursor: 'pointer',
    padding: 6,
    backgroundColor:
      theme.palette.mode === 'light'
        ? lighten(theme.palette.primary.main, 0.95)
        : darken(theme.palette.primary.main, 0.76),
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: alpha(theme.palette.primary.main, 0.2),
    '&:hover': {
      backgroundColor:
        theme.palette.mode === 'light'
          ? lighten(theme.palette.primary.main, 0.9)
          : darken(theme.palette.primary.main, 0.72),
    },
  };
});

export const AmountInputCustom: React.FC<FormTypeProps> = ({ formType }) => {
  const { disabledUI, subvariant, mixpanelToken } = useWidgetConfig();
  const tokenKey = FormKeyHelper.getTokenKey(formType);
  const navigate = useNavigate();

  const [chainId, tokenAddress] = useFieldValues(
    FormKeyHelper.getChainKey(formType),
    FormKeyHelper.getTokenKey(formType),
  );

  const { chain } = useChain(chainId);
  const { token } = useToken(chainId, tokenAddress);
  const isSelected = !!(chain && token);

  const handleClick = () => {
    if (mixpanelToken) {
      mixpanel.track('universal_swap_select_token_button', {
        formType,
        chainId,
        tokenAddress,
      });
    }

    navigate(
      formType === 'from'
        ? navigationRoutes.fromToken
        : subvariant === 'refuel'
          ? navigationRoutes.toTokenNative
          : navigationRoutes.toToken,
    );
  };

  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;

  return (
    <TokenSelect onClick={onClick}>
      {isSelected ? (
        <TokenAvatar token={token as any} chain={chain} />
      ) : (
        <AvatarBadgedDefault />
      )}

      <Box display="flex" alignItems="center" justifyItems="center">
        <div
          style={{
            fontSize: 12,
            // maxWidth: '50px',
            // whiteSpace: 'nowrap',
            // overflow: 'hidden',
            // textOverflow: 'ellipsis',
            fontWeight: 500,
          }}
        >
          {token?.symbol || 'N/A'}
        </div>
        <KeyboardArrowDownOutlined fontSize="inherit" />
      </Box>
    </TokenSelect>
  );
};