// Flexible file type that works with different FileAsset implementations
import { FC, useMemo } from 'react';

import CircleIcon from '@material-hu/icons/material/Circle';
import CloseIcon from '@material-hu/icons/material/Close';
import UploadFile from '@material-hu/icons/material/UploadFile';
import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import ListItem from '@material-hu/mui/ListItem';
import ListItemIcon from '@material-hu/mui/ListItemIcon';
import ListItemText from '@material-hu/mui/ListItemText';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import { useTheme, alpha } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import excelIcon from 'src/assets/svg/excel.svg';
import pdfIcon from 'src/assets/svg/pdf.svg';
import pptIcon from 'src/assets/svg/powerpoint.svg';
import videoIcon from 'src/assets/svg/video.svg';
import wordIcon from 'src/assets/svg/word.svg';
import { FileTypes } from 'src/types/attachments';
import { getFileNameExtension, getFileType } from 'src/utils/files';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type FileAssetLike = {
  name?: string;
  url?: string;
  size?: string;
  type?: string | FileTypes;
  previewType?: string | FileTypes;
};

export type FileAssetListItemProps = {
  file: FileAssetLike;
  index?: number;
  handleRemove?: Function;
  isLoading?: boolean;
  isInfo?: boolean;
  allowDownload?: boolean;
};

const FileAssetListItem: FC<FileAssetListItemProps> = props => {
  const {
    file,
    index,
    handleRemove,
    isLoading = false,
    isInfo = false,
    allowDownload = false,
  } = props;

  const { t } = useLokaliseTranslation('service_management');
  const theme = useTheme();

  const handleSeeDocument = () => {
    if (file.url) {
      window.open(file.url, '_blank', 'noopener,noreferrer');
    }
  };

  const imgSrc = useMemo(() => {
    if (isLoading || !file.name) return null;

    const fileType = getFileNameExtension(file.name) || '';
    const previewType = getFileType(fileType) || file.previewType || file.type;

    switch (previewType) {
      case FileTypes.VIDEO:
        return videoIcon;
      case FileTypes.IMAGE:
        return file.url;
      case FileTypes.GIF:
        return file.url;
      case FileTypes.DOC:
        return wordIcon;
      case FileTypes.EXCEL:
        return excelIcon;
      case FileTypes.PDF:
        return pdfIcon;
      case FileTypes.PPT:
        return pptIcon;
      case FileTypes.FILE:
        return null;
      default:
        return null;
    }
  }, [file, isLoading]);

  return (
    <ListItem
      key={file.url}
      sx={{
        border: '1px solid #E5E7EB',
        borderColor: 'divider',
        borderRadius: '8px',
        backgroundColor: '#FFFFFF',
        width: '100%',
        py: 1.5,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          width: '100%',
          justifyContent: 'space-between',
          alignItems: 'center ',
        }}
      >
        <ListItemIcon>
          {isLoading && (
            <Skeleton
              variant="rectangular"
              animation="wave"
              width={40}
              height={40}
            />
          )}
          {!isLoading && imgSrc && (
            <Box
              sx={{ height: 40, width: 40 }}
              component={'img'}
              src={imgSrc}
              alt=""
              width="40"
              crossOrigin="anonymous"
            />
          )}
          {!isLoading && !imgSrc && (
            <Stack
              sx={{
                width: '40px',
                height: '40px',
                borderRadius: '64px',
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: alpha(theme.palette.primary.main, 0.12),
              }}
            >
              <UploadFile
                sx={{
                  width: '24px',
                  color: theme.palette.primary.main,
                }}
              />
            </Stack>
          )}
        </ListItemIcon>
        <Box sx={{ flex: 1 }}>
          <ListItemText
            primary={
              <Typography
                sx={{
                  fontWeight: 500,
                  '&:hover': {
                    color: allowDownload
                      ? theme.palette.primary.main
                      : theme.palette.text.primary,
                    textDecoration: allowDownload ? 'underline' : 'none',
                    cursor: allowDownload ? 'pointer' : 'auto',
                  },
                }}
              >
                {file.name}
              </Typography>
            }
            secondary={
              <Stack
                sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}
              >
                <Typography
                  variant="body2"
                  color="secondary"
                >
                  {file.size}
                </Typography>
                {isInfo && (
                  <>
                    <CircleIcon
                      sx={{ color: '#6C737F', width: '4px', height: '4px' }}
                    />
                    <Typography
                      sx={{
                        fontSize: '13px',
                        fontWeight: 600,
                        color: theme.palette.primary.main,
                        cursor: 'pointer',
                        '&:hover': {
                          textDecoration: 'underline',
                        },
                      }}
                      onClick={handleSeeDocument}
                    >
                      {t('preview')}
                    </Typography>
                  </>
                )}
              </Stack>
            }
          />
        </Box>
        {isLoading && <CircularProgress size={24} />}
        {!isLoading && !isInfo && (
          <Tooltip
            title={t('remove_file')}
            placement="top"
          >
            <IconButton onClick={() => handleRemove?.(index)}>
              <CloseIcon />
            </IconButton>
          </Tooltip>
        )}
      </Stack>
    </ListItem>
  );
};

export default FileAssetListItem;
