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

export default function Images({
  selectedImage,
  setSelectedImage,
  isMultiple,
  maxCount,
}) {
  const dispatch = useDispatch();
  const [pageConfig, setPageConfig] = useState({ page: 1, count: 15 });
  const { list, loading, total } = useSelector((state) => state.media);

  const handleSelectImage = (img) => {
    if (isMultiple) {
      if (maxCount && selectedImage.length >= maxCount) {
        toast.error(`You can select maximum ${maxCount} images`);
        return;
      }
      const isExist = selectedImage.find((selected) => selected.id === img.id);
      if (isExist) {
        setSelectedImage((prev) =>
          prev.filter((selected) => selected.id !== img.id)
        );
      } else {
        setSelectedImage((prev) => [...prev, img]);
      }
    } else {
      setSelectedImage([img]);
    }
  };

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

  useEffect(() => {
    dispatch(loadAllMediaPaginated(pageConfig));
  }, [dispatch, pageConfig]);

  const fetchData = (page, count) => {
    setPageConfig((prev) => {
      return { ...prev, page, count };
    });
  };

  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}
    </>
  );
}
