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

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

import HuAvatar from '@material-hu/components/design-system/Avatar';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName, getInitials } from 'src/utils/userUtils';

import UserActions from './UserActions';
import useFormatDate from 'src/hooks/useFormatDate';

type PeopleRowProps = {
  user: User;
  key: number;
  isEmailVisible: boolean;
  allowHiringDate: boolean;
};

const PeopleRow = ({
  user,
  key,
  isEmailVisible,
  allowHiringDate,
}: PeopleRowProps) => {
  const userFullName = getFullName(user);
  const navigate = useNavigate();
  const { enqueueSnackbar } = useHuSnackbar();
  const { t } = useLokaliseTranslation('people');

  const handleRowClick = (userSelected: User) => {
    navigate(profileRoutes.profile(userSelected.id));
  };

  const handleCopyText = (
    event: React.MouseEvent<HTMLButtonElement>,
    email: string,
  ) => {
    event.stopPropagation();
    try {
      navigator.clipboard.writeText(email);
      enqueueSnackbar({
        title: t('COPY_EMAIL_CLIPBOARD', { email }),
        variant: 'success',
      });
    } catch (err) {
      enqueueSnackbar({
        title: t('COPY_EMAIL_CLIPBOARD_ERROR'),
        variant: 'error',
      });
      console.error('Failed to copy text: ', err);
    }
  };

  const { formatDate } = useFormatDate();

  return (
    <HuTableRow
      key={key}
      onClick={() => handleRowClick(user)}
    >
      <HuTableCell
        sx={{
          overflow: 'hidden',
          textWrap: 'nowrap',
          textOverflow: 'ellipsis',
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1,
            alignItems: 'center',
          }}
        >
          <HuAvatar
            alt=""
            src={user.profilePicture || ''}
            text={getInitials(userFullName)}
          />
          <Typography
            variant="globalS"
            noWrap
            fontWeight="fontWeightSemiBold"
          >
            {userFullName}
          </Typography>
        </Stack>
      </HuTableCell>
      {isEmailVisible && (
        <HuTableCell>
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <Typography
              variant="globalS"
              noWrap
            >
              {user.email}
            </Typography>
            {user.email && (
              <IconButton onClick={event => handleCopyText(event, user.email!)}>
                <IconCopy size={16} />
              </IconButton>
            )}
          </Stack>
        </HuTableCell>
      )}
      {allowHiringDate && (
        <HuTableCell sx={{ whiteSpace: 'nowrap', width: '160px' }}>
          <Typography
            variant="globalS"
            noWrap
          >
            {user.hiringDate ? formatDate(user.hiringDate) : '-'}
          </Typography>
        </HuTableCell>
      )}
      <HuTableCell>
        <UserActions user={user} />
      </HuTableCell>
    </HuTableRow>
  );
};

export default PeopleRow;
