import { memo } from 'react';
import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
import appleIcon from '@iconify-icons/logos/apple';
import googleIcon from '@iconify-icons/logos/google-icon';
import auth0Icon from '@iconify-icons/logos/auth0-icon';
import passKeyRoundedIcon from '@iconify-icons/material-symbols/passkey-rounded';
import { Icon } from '@iconify/react';
import { Box, BoxProps, SxProps } from '@mui/material';

import { LOGIN_PROVIDER } from '../Util/constant';
import { mergeSx } from '../Util/style';
import DIDWalletLogo from './icons/did-wallet-logo';
import GithubLogo from './icons/github-logo';

function ProviderIcon({
  provider = 'wallet',
  ...rest
}: {
  provider?: (typeof LOGIN_PROVIDER)[keyof typeof LOGIN_PROVIDER] | 'wallet-web';
} & BoxProps) {
  if (['wallet', 'wallet-web'].includes(provider)) {
    // @ts-ignore
    return <DIDWalletLogo {...rest} />;
  }

  if (provider === LOGIN_PROVIDER.GITHUB) {
    return (
      <Box component="span" {...rest} sx={mergeSx({ display: 'inline-block' }, rest.sx as SxProps)}>
        <GithubLogo width="100%" height="100%" fill="currentColor" />
      </Box>
    );
  }

  const iconMap = {
    [LOGIN_PROVIDER.AUTH0]: auth0Icon,
    [LOGIN_PROVIDER.EMAIL]: mailOutlineRoundedIcon,
    [LOGIN_PROVIDER.APPLE]: appleIcon,
    [LOGIN_PROVIDER.GOOGLE]: googleIcon,
    [LOGIN_PROVIDER.PASSKEY]: passKeyRoundedIcon,
    [LOGIN_PROVIDER.TWITTER]: {
      body: '<path fill="currentColor" d="M149.079 108.399L242.33 0h-22.098l-80.97 94.12L74.59 0H0l97.796 142.328L0 256h22.1l85.507-99.395L175.905 256h74.59L149.073 108.399zM118.81 143.58l-9.909-14.172l-78.84-112.773h33.943l63.625 91.011l9.909 14.173l82.705 118.3H186.3l-67.49-96.533z"/>',
      width: 251,
      height: 251,
    },
  };

  return iconMap[provider] ? (
    <Box
      component={Icon}
      icon={iconMap[provider]}
      fill="currentColor"
      {...rest}
      sx={mergeSx(
        { width: '100%', height: '100%' },
        provider === LOGIN_PROVIDER.TWITTER ? { scale: '0.8' } : {},
        rest.sx as SxProps
      )}
    />
  ) : null;
}

export default memo(ProviderIcon);
