import { type ReactNode } from 'react';

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

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

type UserListRowUser = {
  id?: number;
  profilePicture?: string | null;
  firstName?: string;
  lastName?: string;
  fullName?: string;
};

type UserListRowProps = {
  user: UserListRowUser;
  primary: string;
  primaryTitle?: string;
  onClick?: () => void;
  hideChevron?: boolean;
  children?: ReactNode;
};

const UserListRow = ({
  user,
  primary,
  primaryTitle,
  onClick,
  hideChevron = false,
  children,
}: UserListRowProps) => {
  const isClickable = Boolean(onClick);
  const showChevron = isClickable && !hideChevron;

  return (
    <Stack component="li">
      <Stack
        onClick={onClick}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          p: 3,
          gap: 2,
          width: '100%',
          minWidth: 0,
          flexWrap: 'wrap',
          ...(isClickable && {
            cursor: 'pointer',
            '&:hover': {
              backgroundColor: 'action.hover',
            },
          }),
        }}
      >
        <ProfilePicture
          user={{
            id: user.id ?? 0,
            profilePicture: user.profilePicture ?? null,
            firstName: user.firstName,
            lastName: user.lastName,
            fullName: user.fullName,
          }}
          size="medium"
          sx={{ flexShrink: 0 }}
        />
        <Typography
          component="div"
          variant="body1"
          fontWeight="fontWeightSemiBold"
          color="text.primary"
          title={primaryTitle}
          sx={{
            flex: '1 1 160px',
            minWidth: 0,
            wordBreak: 'break-word',
          }}
        >
          {primary}
        </Typography>
        {children}
        {showChevron && (
          <IconChevronRight
            size={20}
            aria-hidden
            style={{ flexShrink: 0, opacity: 0.6 }}
          />
        )}
      </Stack>
    </Stack>
  );
};

export default UserListRow;
