import React from "react";
import { useLightboxContext } from "./LightboxContext";

import "./Lightbox.css";
import { LightboxData } from "@mt/common-types";
import { LightboxContent } from "./LightboxContent";
import { FormattedMessage } from "react-intl";

export const Lightbox = () => {
  // prettier-ignore
  const { data, lightboxActive, closeLightbox } = useLightboxContext<LightboxData>();

  return lightboxActive ? (
    <div className="lightbox-overlay">
      <div className="lightbox-content">
        <div
          className="lightbox-content__wrapper"
          style={{ height: "749px", width: "1220px" }}
        >
          <LightboxContent />

          {data.watermarkUrl && (
            <img
              src={data.watermarkUrl}
              alt="Watermark"
              className="watermark"
            />
          )}

          <button
            className="lightbox-content__close-btn"
            onPointerUp={closeLightbox}
          >
            <FormattedMessage id="close" />
          </button>
        </div>
      </div>
    </div>
  ) : null;
};