import Box from '@mui/material/Box';
import { fetchAll } from '../../../DataPage/dataSlice';
import { open, requestRotateImage } from '../../../DataPage/imageActionsSlice';
import { removePicture } from '../slices/picturesSlice';
import { useDispatch } from 'react-redux';
import DeleteIcon from '@mui/icons-material/Delete';
import React from 'react';
import axios from 'B/axios';
import {
  getFileExtension,
  isPreviewableImageFileName,
} from '../../dialogs/imagePreviewUtils';

interface PictureProps {
  id: number;
  ergID: number;
  path: string;
  comment: string;
  canDelete: boolean;
  onPreviewImage?: (id: number) => void;
}

export default function Picture({
  id,
  ergID,
  path,
  comment: _comment,
  canDelete,
  onPreviewImage,
}: PictureProps) {
  const d = useDispatch();
  const handleDelete = () => {
    d(open({ picID: id, ergID }));
  };

  const handleRotate = () => {
    d(requestRotateImage(id));
  };

  const DeleteView = () => {
    if (!canDelete) return null;
    return (
      <Box style={{ cursor: 'pointer' }} onClick={handleDelete}>
        <DeleteIcon fontSize='large' />
      </Box>
    );
  };

  const type = getFileExtension(path);
  const isPreviewableImage = isPreviewableImageFileName(path);
  const imgLink = `/file/${path}`;
  let pathFile = `/image/${id}`;
  if (isPreviewableImage) {
    return (
      <Box>
        <Box>
          <a
            href={pathFile}
            target='_blank'
            rel='noreferrer'
            style={{ cursor: 'zoom-in' }}
            onClick={(event) => {
              if (typeof onPreviewImage === 'function') {
                event.preventDefault();
                onPreviewImage(id);
              }
            }}
          >
            <img
              src={`${pathFile}?${new Date().getTime()}`}
              width='250'
              style={{ cursor: 'zoom-in' }}
            />
          </a>
        </Box>

        <Box display='flex'>
          <Box onClick={handleRotate} style={{ cursor: 'pointer' }} mr={2}>
            <img
              style={{ width: '32px', height: '32px' }}
              src='./imgtasko/pic_rotate.png'
            />
          </Box>
          <Box>
            <DeleteView />
          </Box>
        </Box>
      </Box>
    );
  }

  switch (type) {
    case '3gp':
      return (
        <Box>
          <video src={pathFile} controls height='320'></video>;
          <DeleteView />
        </Box>
      );

    case 'pdf':
      return (
        <Box>
          <a href={pathFile} target='_blank' rel='noreferrer'>
            <img src='imgtasko/pdf.png' width='100' />
            <span>{imgLink?.split(/[\\/]/)?.pop() ?? 'invalid link'}</span>
          </a>
          <DeleteView />
        </Box>
      );

    default:
      return (
        <Box>
          <a href={pathFile} target='_blank' rel='noreferrer'>
            <img src='imgtasko/file.png' width='100' />
            <span>{imgLink?.split(/[\\/]/)?.pop() ?? 'invalid link'}</span>
          </a>
          <DeleteView />
        </Box>
      );
  }
}