import { memo } from 'react';
import { Chip } from '@mui/material';
import { Icon } from '@iconify/react';
import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
import { useCreation } from 'ahooks';
import type { UserPublicInfo } from '@blocklet/js-sdk';

function SwitchRole({
  user,
  switchPassport,
}: {
  user: UserPublicInfo & { role: string; passports: { name: string; title: string; role: string }[] };
  switchPassport: () => void;
}) {
  const currentRole = useCreation(
    () => (user?.passports || [])?.find((item) => item.name === user.role || item.role === user.role),
    [user?.passports, user?.role]
  );

  return (
    <Chip
      label={currentRole?.title || user?.role || 'Guest'}
      size="small"
      variant="outlined"
      sx={{
        flexShrink: 0,
        fontWeight: 'bold',
        fontSize: '12px',
        color: 'text.primary',
        borderColor: 'grey.100',
        backgroundColor: 'transparent',
        textTransform: 'capitalize',
        pr: 1,
        pl: 0.5,
        '&:active': {
          boxShadow: 'none',
        },
      }}
      clickable
      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
      onDelete={switchPassport}
      onClick={switchPassport}
    />
  );
}

export default memo(SwitchRole);
