import React, { useState } from 'react';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import { styled } from '@mui/material/styles';
import Clear from '@mui/icons-material/Clear';
import clsx from 'clsx';
import { ScreenshotInterface } from '../TranslationDialogContextProvider';
import { DEVTOOLS_Z_INDEX } from '../../constants';

const Screenshot = styled('img')`
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.1s, filter 0.5s;
  &:hover {
    transform: scale(1.1);
  }
`;

const ScreenshotBox = styled('div')`
  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
  position: relative;
  box-sizing: border-box;
  width: 98px;
  height: 98px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin: 1px;
  cursor: pointer;
  overflow: visible;
`;

const ScreenshotOverflowWrapper = styled('div')`
  overflow: hidden;
  width: 100%;
  height: 100%;
`;

const DeleteIconButton = styled(IconButton)`
  position: absolute;
  z-index: 2;
  font-size: 20px;
  right: -8px;
  top: -8px;
  padding: 2px;
  background-color: rgba(62, 62, 62, 0.9);
  color: rgba(255, 255, 255, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s linear, opacity 0.1s linear;
  &:hover {
    background-color: rgba(62, 62, 62, 1);
    color: rgba(255, 255, 255, 0.9);
  }
  &.hover {
    opacity: 1;
    visibility: visible;
  }
`;

const DeleteIcon = styled(Clear)`
  font-size: 20px;
`;

export type Props = {
  onClick: () => void;
  onDelete: (id: number) => void;
  data: ScreenshotInterface;
};

export const ScreenshotThumbnail: React.FC<Props> = (props) => {
  const [hover, setHover] = useState(false);

  const onMouseOver = () => {
    setHover(true);
  };

  const onMouseOut = () => {
    setHover(false);
  };

  const onDeleteClick = () => {
    props.onDelete(props.data.id);
  };

  return (
    <ScreenshotBox onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
      {props.onDelete && (
        <Tooltip
          title="Delete"
          PopperProps={{
            disablePortal: true,
            style: { zIndex: DEVTOOLS_Z_INDEX },
          }}
        >
          <DeleteIconButton onClick={onDeleteClick} className={clsx({ hover })}>
            <DeleteIcon />
          </DeleteIconButton>
        </Tooltip>
      )}

      <ScreenshotOverflowWrapper key={props.data.id} onClick={props.onClick}>
        <Screenshot
          onMouseDown={(e) => e.preventDefault()}
          src={props.data.fileUrl}
          aria-label="Screenshot"
        />
      </ScreenshotOverflowWrapper>
    </ScreenshotBox>
  );
};