import Stack from '@material-hu/mui/Stack';

import Pills from '@material-hu/components/design-system/Pills';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';
import Title from '@material-hu/components/design-system/Title';

import useFormatDate from 'src/hooks/useFormatDate';
import { type SessionTableItem } from 'src/pages/dashboard/Learning/Sessions/types';
import { getSessionStatusType } from 'src/pages/dashboard/Learning/Sessions/utils';
import { CopyTypePath } from 'src/types/deeplinks';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CopyLink, {
  copyLinkContainerStyle,
} from 'src/components/CopyLink/CopyLink';

import { TableRowActions } from './TableRowActions';

type SessionsTableRowProps = {
  session: SessionTableItem;
  onEditSession: (sessionId: number) => void;
};

export const SessionsTableRow = ({
  session,
  onEditSession,
}: SessionsTableRowProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { formatDate } = useFormatDate();

  return (
    <TableRow
      key={session.id}
      sx={{ '& td': { py: 1 }, ...copyLinkContainerStyle }}
      hover
      onClick={() => onEditSession(session.id)}
    >
      <TableCell>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
          <Title
            withEllipsis
            overflow="tooltip"
            title={session.title}
            fontWeight="fontWeightRegular"
            slotProps={{ title: { sx: { fontSize: '14px' } } }}
          />
          <CopyLink
            type={CopyTypePath.SESSION}
            id={session.id}
            IconButtonProps={{ sx: { padding: 0.5 } }}
          />
        </Stack>
      </TableCell>
      <TableCell>
        {session.type
          ? t(`session.type.${session.type.toLowerCase()}_one`)
          : '-'}
      </TableCell>
      <TableCell sx={{ textWrap: 'nowrap' }}>
        <Stack>
          {session.localDate && session.startTime ? (
            <>
              {formatDate(session.localDate, 'dd/MMM/yyyy').toUpperCase()}
              {' - '}
              {`${session.startTime} h`}
            </>
          ) : (
            '-'
          )}
        </Stack>
      </TableCell>
      <TableCell>{session.totalConfirmed ?? '-'}</TableCell>
      <TableCell>{session.totalAssisted ?? '-'}</TableCell>
      <TableCell>
        <Pills
          label={t(`session.status.${session.status.toLowerCase()}`, {
            count: 1,
          })}
          type={getSessionStatusType(session.status)}
          hasIcon={false}
          size="small"
        />
      </TableCell>
      <TableRowActions
        sessionId={session.id}
        sessionStatus={session.status}
      />
    </TableRow>
  );
};
