import { useNavigate } from 'react-router-dom';

import { type GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';

import Button from '@material-hu/components/design-system/Buttons/Button';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';

import {
  type Acknowledgement,
  type AcknowUser,
  type Category,
} from 'src/pages/dashboard/acknowledgements/types';
import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName, getInitials } from 'src/utils/userUtils';

export type AcknowledgedsProfileDrawerProps = Pick<
  Acknowledgement,
  'acknowledgeds'
> & {
  category: Category;
};

type DrawerConfig = GetDrawerConfiguration<AcknowledgedsProfileDrawerProps>;

const getAcknowledgedsProfileDrawer: DrawerConfig = ({
  acknowledgeds = [],
  category,
  closeDrawer,
}) => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation('acknowledgements');

  const handleUserClick = (user: AcknowUser) => () => {
    navigate(profileRoutes.profile(user.id));
  };

  return {
    children: (
      <List>
        {acknowledgeds?.map(user => (
          <ListItem
            key={user.id}
            onClick={handleUserClick(user)}
            avatar={{
              alt: getFullName(user),
              src: user.profilePicture || undefined,
              text: getInitials(getFullName(user)),
            }}
            text={{
              title: getFullName(user),
              description: user.deleted ? t('deleted_user') : '',
            }}
          />
        ))}
      </List>
    ),
    title: t('acknowledgeds_drawer_title', { category: category.name }),
    footer: (
      <Button
        onClick={closeDrawer}
        variant="contained"
        fullWidth
      >
        {t('general:close')}
      </Button>
    ),
  };
};

export default getAcknowledgedsProfileDrawer;
