"use client ";

import React, { useContext, useState } from "react";
import p1 from "../../public/images/product/1.png";
import p2 from "../../public/images/product/2.png";
import p3 from "../../public/images/product/3.png";
import logo from "../../public/images/logo.png";
import Image from "next/image";
import Lightbox from "react-image-lightbox";
import AppContext from "@ctx/AppContext";

const GalleryBox = ({ file }) => {
  const CTX = useContext(AppContext);

  const isOpenLightBox = CTX.state.isOpenLightBox;

  console.log("image", file);
  return (
    <div className=" w-full rounded-3xl">
      <div className="flex justify-center xs:pb-[10px]  ">
        <div className="">
          {file?.length > 0 ? (
            <Image
              src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
                file && file[0].fileLocation
              }`}
              width={350}
              height={350}
              className=" mx-auto !object-cover"
              onClick={() => CTX.setIsOpenLightBox(true)}
              alt=""
            />
          ) : (
            <div className="xs:!w-[85px] lg:!w-[85px] ">
              <Image
                src={logo}
                className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
                alt=""
              />
            </div>
          )}
        </div>
      </div>

      <div className="flex  overflow-x-auto p-3 " id="swich-scrollbar">
        {file?.map((e) => (
          <div
            className="rounded-3xl bg-white border shadow-sm p-3 ml-2"
            key={e.id}
            onClick={() => CTX.setIsOpenLightBox(true)}
          >
            <div className="xs:w-[50px] lg:w-[50px]">
              <Image
                src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.fileLocation}`}
                alt={e.fileName}
                width={50}
                height={50}
              />
            </div>
          </div>
        ))}
      </div>

      <div>
        {isOpenLightBox && (
          <Lightbox
            mainSrc={`http://storage.vesmook.com/${
              file && file[0].fileLocation
            }`}
            onCloseRequest={() => CTX.setIsOpenLightBox(false)}
            onImageLoadError={(e) => console.log(e)}
            imageLoadErrorMessage={"باز نمیشه ؟!!!"}
          />
        )}
      </div>
    </div>
  );
};

export default GalleryBox;