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

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

import HuFileIcon from '@material-hu/components/composed-components/files/FileIcon';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { useAuth } from 'src/contexts/JWTContext';
import FileMenu from 'src/pages/dashboard/files/components/FileMenu';
import { filesRoutes } from 'src/pages/dashboard/files/routes';
import { FileTypes } from 'src/types/attachments';
import { type File } from 'src/types/files';
import { formatUTCDate } from 'src/utils/date';
import { getFullName } from 'src/utils/userUtils';

export type FileRowProps = {
  file: File;
  index: number;
  onClickFile: (file: File, index: number) => void;
};

enum RowIds {
  NAME = 'name',
  UPLOADER = 'uploader',
  UPDATED_AT = 'updated_at',
  SIZE = 'size',
}

const ellipsisStyle = {
  display: '-webkit-box',
  overflow: 'hidden',
  WebkitBoxOrient: 'vertical',
  WebkitLineClamp: 2,
  textOverflow: 'ellipsis',
  wordWrap: 'break-word',
  flex: 1,
};

export const FileRow = (props: FileRowProps) => {
  const { file, index, onClickFile } = props;
  const navigate = useNavigate();
  const { instance } = useAuth();
  const disablePreview = instance?.hideFileDownload;
  const showActionsMenu =
    (!disablePreview && file.type === FileTypes.FILE) ||
    file.type === FileTypes.FOLDER;

  const handleClick = () => {
    if (file.type === FileTypes.FOLDER) {
      navigate(filesRoutes.detail(file.id));
    }
  };

  const handleManagePropagation = (e: any) => {
    e.stopPropagation();
  };

  const rows = [
    {
      id: RowIds.NAME,
      label: (
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          <Stack style={{ flexShrink: 0 }}>
            <HuFileIcon file={file} />
          </Stack>
          <HuTooltip title={file.name}>
            <Typography
              sx={{
                ...ellipsisStyle,
                minWidth: 200,
              }}
            >
              {file.name}
            </Typography>
          </HuTooltip>
        </Stack>
      ),
    },
    {
      id: RowIds.UPLOADER,
      label: (
        <Typography sx={ellipsisStyle}>
          {getFullName(file.uploader!)}
        </Typography>
      ),
    },
    {
      id: RowIds.UPDATED_AT,
      label: (
        <Typography sx={ellipsisStyle}>
          {formatUTCDate(file.updatedAt)}
        </Typography>
      ),
    },
    { id: RowIds.SIZE, label: file.size || '-' },
  ];

  return (
    <HuTableRow
      hover
      onClick={handleClick}
      sx={{
        userSelect: 'none',
        cursor: 'pointer',
      }}
      onDoubleClick={() => onClickFile(file, index)}
    >
      {rows.map(row => (
        <HuTableCell
          key={row.id}
          sx={{
            maxWidth: 300,
          }}
          variant="titleField"
        >
          {row.label}
        </HuTableCell>
      ))}
      <HuTableCell
        align="right"
        onClick={handleManagePropagation}
      >
        {showActionsMenu && <FileMenu file={file} />}
      </HuTableCell>
    </HuTableRow>
  );
};

export default FileRow;
