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

import AvatarGroup from '@material-hu/components/design-system/AvatarGroup';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { type User } from 'src/types/user';
import { getFullName, getInitials } from 'src/utils/userUtils';

import SelectedUsersTooltipList from './SelectedUsersTooltipList';

type ResponsibleCardProps = {
  title: string;
  description: string;
  selectedUsers: User[];
  onOpen: () => void;
  disabled?: boolean;
  label?: string;
  tooltipLabel?: string;
};

const MAX_AVATARS = 2;

export function ResponsibleCard({
  title,
  description,
  selectedUsers,
  onOpen,
  disabled,
  label,
  tooltipLabel,
}: ResponsibleCardProps) {
  const avatars = selectedUsers.slice(0, MAX_AVATARS).map(user => ({
    src: user.profilePicture ?? undefined,
    alt: getFullName(user),
    text: getInitials(getFullName(user)),
  }));

  return (
    <Stack sx={{ gap: 0.5 }}>
      {label ? (
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          color="new.text.neutral.default"
        >
          {label}
        </Typography>
      ) : null}
      <Stack
        role="button"
        tabIndex={disabled ? -1 : 0}
        onClick={disabled ? undefined : onOpen}
        onKeyDown={e => {
          if (disabled) return;
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onOpen();
          }
        }}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          minHeight: 80,
          px: 2,
          py: 1.5,
          gap: 2,
          borderRadius: ({ shape }) => shape.borderRadiusL,
          border: ({ palette }) =>
            `1px solid ${palette.new.border.neutral.default}`,
          bgcolor: 'background.paper',
          cursor: disabled ? 'not-allowed' : 'pointer',
          opacity: disabled ? 0.6 : 1,
          '&:focus-visible': {
            outline: ({ palette }) => `2px solid ${palette.primary.main}`,
            outlineOffset: 2,
          },
        }}
      >
        <Stack
          sx={{
            width: 40,
            height: 40,
            borderRadius: '50%',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
            bgcolor: 'action.background.brand.default',
            color: 'new.text.neutral.brand',
          }}
        >
          <IconUsersPlus
            size={22}
            stroke={1.5}
          />
        </Stack>
        <Stack sx={{ flex: 1, minWidth: 0, gap: 0.25 }}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color="new.text.neutral.default"
          >
            {title}
          </Typography>
          <Typography
            variant="globalXS"
            color="new.text.neutral.lighter"
          >
            {description}
          </Typography>
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 0.5,
            flexShrink: 0,
          }}
        >
          {avatars.length > 0 && (
            <HuTooltip
              title={tooltipLabel}
              description={<SelectedUsersTooltipList users={selectedUsers} />}
            >
              <span>
                <AvatarGroup
                  avatars={avatars}
                  totalAvatars={selectedUsers.length}
                  size="medium"
                />
              </span>
            </HuTooltip>
          )}
          <Stack
            aria-hidden
            sx={{ color: 'new.text.neutral.brand', flexShrink: 0 }}
          >
            <IconChevronRight size={20} />
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}
