import Pagination from "@/UI/Pagination";
import Loader from "@/components/Loader/Loader";
import {
  clearMedia,
  loadAllMediaPaginated,
} from "@/redux/rtk/features/media/mediaSlice";
import { cn } from "@/utils/functions";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import CommonSearch from "../CommonUi/CommonSearch";

export default function Images({ selectedImage, setSelectedImage }) {
  const dispatch = useDispatch();
  const [pageConfig, setPageConfig] = useState({ page: 1, count: 36 });
  const { list, loading, total } = useSelector((state) => state.media);
  const [lastSelectedIndex, setLastSelectedIndex] = useState(null);
  const handleItemClick = (index, event) => {
    if (event.shiftKey) {
      const selected = list.slice(
        Math.min(index, lastSelectedIndex),
        Math.max(index, lastSelectedIndex) + 1
      );
      setSelectedImage(selected);
    } else {
      const selected = list[index];
      const isSelectedImage = selectedImage.find(
        (selected) => selected.id === list[index].id
      );
      if (isSelectedImage) {
        setSelectedImage((prev) =>
          prev.filter((img) => img.id !== list[index].id)
        );
      } else {
        setSelectedImage((prev) => [...prev, selected]);
        setLastSelectedIndex(index);
      }
    }
  };

  let content = null;
  if (loading) {
    content = <Loader />;
  } else if (list?.length > 0) {
    content = (
      <>
        <div className="flex flex-wrap gap-2">
          {list.map((img, index) => {
            const isSelectedImage = selectedImage.find(
              (selected) => selected.id === img.id
            );
            return (
              <div
                onClick={(e) => handleItemClick(index, e)}
                key={img.id}
                className={cn(
                  "border-2 border-transparent h-[100px] w-[100px]",
                  {
                    "border-blue-500": isSelectedImage,
                  }
                )}
                title={img.fileName}>
                <img
                  src={`${import.meta.env.VITE_APP_API}/media/view/${img?.id}`}
                  alt={img.fileName}
                  loading="lazy"
                  className="content-center w-full h-full object-cover"
                />
              </div>
            );
          })}
        </div>
      </>
    );
  }
  const fetchData = (page, count) => {
    setPageConfig((prev) => {
      return { ...prev, page, count };
    });
  };
  useEffect(() => {
    dispatch(loadAllMediaPaginated(pageConfig));
    return () => {
      dispatch(clearMedia());
    };
  }, [dispatch, pageConfig]);

  return (
    <>
      <div className="flex flex-col md:flex-row gap-2  justify-between  pb-2 sticky top-0 bg-white w-full">
        <CommonSearch setPageConfig={setPageConfig} />
        <Pagination
          defaultPageSize={pageConfig.count}
          onChange={fetchData}
          total={total}
        />
      </div>
      {content}
    </>
  );
}
