import React, { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import screenfull from "screenfull";
import ImageComponent from "../../../ImageComponent";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const PreviewImage = ({ src, fileId, width = "100%", height = "360px" }) => {
  const { findText } = useTranslation(wordStore);
  const [isFullScreen, setFullScreen] = useState(false);
  const containRef = useRef();
  const handleFullScreen = () => {
    if (screenfull.isEnabled) {
      screenfull.toggle(containRef.current);
    }
  };
  useEffect(() => {
    if (screenfull.isEnabled) {
      screenfull.on('change', () => {
        setFullScreen(screenfull.isFullscreen);
      });
    }
  }, []);
  return (
    <Container
      style={{
        width,
        height,
      }}
      ref={containRef}
      className={findText("{arg1}", {
        arg1: isFullScreen ? "full-mode" : "",
      })}
    >
      <ImageComponent
        src={src}
        fileId={fileId}
        width={findText("100%")}
        height={findText("100%")}
        fallbackLogoSize={findText("medium")}
      />
      <span onClick={handleFullScreen}>
        <Icon />
      </span>
    </Container>
  );
};
export default PreviewImage;
const Container = styled.div`
  background-color: #d8d8d8;
  width: 100%;
  position: relative;
  &.full-mode {
    height: 100vh;
    img {
      object-fit: contain !important;
    }
  }
  > span {
    position: absolute;
    z-index: 3;
    cursor: pointer;
    bottom: 32px;
    right: 32px;
    background-color: #f5f7f7;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 500%;
  }
  img {
    object-fit: cover !important;
  }
`;
const Icon = ({ onClick }) => {
  return (
    <svg
      onClick={onClick}
      width="17"
      height="16"
      viewBox="0 0 17 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10.4297 1.82031H11.7593C13.7538 1.82031 15.0834 3.07845 15.0834 4.96567V6.22381"
        stroke="#7C8080"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M1.78711 6.22381V4.96567C1.78711 3.07845 3.11674 1.82031 5.11117 1.82031H6.4408"
        stroke="#7C8080"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M10.4297 14.4035H11.7593C13.7538 14.4035 15.0834 13.1454 15.0834 11.2581V10"
        stroke="#7C8080"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M1.78711 10V11.2581C1.78711 13.1454 3.11674 14.4035 5.11117 14.4035H6.4408"
        stroke="#7C8080"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};
