import { IconTrash } from '@material-hu/icons/tabler';
import Typography from '@material-hu/mui/Typography';

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { GroupMemberRoles } from 'src/types/groups';
import { User } from 'src/types/user';
import { formatUTCDate } from 'src/utils/date';
import { getFullName } from 'src/utils/userUtils';

import ProfilePicture from 'src/components/user/ProfilePicture';

const { REGULAR } = GroupMemberRoles;

type MemberRowProps = {
  member: User;
  currentUserId?: number;
  onRemove: (userId: string) => void;
  t: (key: string) => string;
};

const MemberRow = ({ member, currentUserId, onRemove, t }: MemberRowProps) => {
  return (
    <HuTableRow>
      <HuTableCell
        component="th"
        scope="row"
        sx={{ gap: 1, display: 'flex', alignItems: 'center' }}
      >
        <ProfilePicture
          user={{
            id: member.id,
            profilePicture: member.profilePicture,
          }}
        />
        <Typography>{getFullName(member)}</Typography>
      </HuTableCell>
      <HuTableCell align="left">
        {t(`group:${REGULAR.toLowerCase()}`)}
      </HuTableCell>
      <HuTableCell align="left">
        <Typography
          noWrap
          title={member.email ?? undefined}
          sx={{
            maxWidth: 200,
          }}
        >
          {member.email}
        </Typography>
      </HuTableCell>
      <HuTableCell
        component="th"
        scope="row"
      >
        {formatUTCDate(member.createdAt)}
      </HuTableCell>
      <HuTableCell align="left">
        {currentUserId && member.id !== currentUserId && (
          <HuMenuList
            options={[
              {
                onClick: () => onRemove(String(member.id)),
                Icon: IconTrash,
                title: t('group:remove_member'),
              },
            ]}
          />
        )}
      </HuTableCell>
    </HuTableRow>
  );
};

export default MemberRow;