import upperFirst from 'lodash/upperFirst';
import { Box, type BoxProps } from '@mui/material';
import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';

import NFTDisplay from '../NFTDisplay';
import { useLocaleContext } from '../Locale/context';
import { Passport as PassportType, User } from '../type';

export interface PassportProps extends BoxProps {
  passport: PassportType;
  user: User;
  color: string;
  width?: number;
  icon?: React.ReactNode;
  createPassportSvg: (props: any) => string;
}

export default function Passport({
  passport,
  user,
  color,
  width = 150,
  icon = null,
  createPassportSvg,
  // inherit props
  children,
  ...rest
}: PassportProps) {
  const { t } = useLocaleContext();
  return (
    <Box
      {...rest}
      sx={{
        display: 'flex',
        alignItems: 'center',
        ...rest?.sx,
      }}>
      {!!passport.display && (
        <Box className="passport-item__display" sx={{ width }}>
          <NFTDisplay
            address={passport.id}
            data={passport.display}
            imageFilter={typeof width === 'number' ? { imageFilter: 'resize', w: width } : null}
          />
        </Box>
      )}
      {!passport.display && (
        <Box
          className="passport-item__display"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{
            __html: createPassportSvg({
              title: passport.scope === 'kyc' ? passport.name : passport.title,
              issuer: passport.issuer && passport.issuer.name,
              issuerDid: passport.issuer && passport.issuer.id,
              ownerName: user.fullName,
              ownerDid: user.did,
              ownerAvatarUrl: user.avatar,
              revoked: passport.revoked,
              scope: passport.scope,
              role: passport.role,
              display: passport.display,
              preferredColor: color,
              width,
            }),
          }}
        />
      )}
      <Box
        className="passport-item__body"
        sx={{
          p: 0,
          ml: 3,
          mt: 0,
        }}>
        <Box
          className="passport-item__title"
          sx={{
            display: 'flex',
            alignItems: 'center',
            fontWeight: 400,
            fontSize: '16px',
            lineHeight: 1.1875,
            color: 'text.primary',
          }}>
          {upperFirst(passport.title)}
          <Box
            className="passport-item__status-icon"
            sx={{
              svg: {
                fill: '#bfbfbf',
                height: '1.2em',
                marginLeft: '0.4em',
              },
            }}>
            {icon}
            {passport.revoked && <RevokeIcon />}
          </Box>
        </Box>
        {passport.expirationDate && (
          <Box
            className="passport-item__title"
            sx={{
              display: 'flex',
              alignItems: 'center',
              fontWeight: 400,
              fontSize: '16px',
              lineHeight: 1.1875,
              color: 'text.primary',
            }}>
            {t('team.passport.validUntil', { date: passport.expirationDate })}
          </Box>
        )}
        {children}
      </Box>
    </Box>
  );
}
