import { loadAllQuickLinkPosition } from "@/redux/rtk/features/quickLink/quickLinkSlice";
import { loadAllStoreByUser } from "@/redux/rtk/features/store/storeSlice";
import { cn } from "@/utils/functions";
import { DatePicker, Select } from "antd";
import dayjs from "dayjs";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";

export default function QuickLink({ pageConfig, setPageConfig }) {
  // const { list, defaultStore, loading } = useSelector((state) => state.store);
  const { list: quickLink, loading: QLoading } = useSelector(
    (state) => state.quickLink
  );
  const { RangePicker } = DatePicker;
  const dispatch = useDispatch();

  const onCalendarChange = (dates) => {
    const startDate = dates[0].format("YYYY-MM-DD");
    const endDate = dates[1].format("YYYY-MM-DD");

    setPageConfig((prev) => {
      return {
        ...prev,
        startDate,
        endDate,
      };
    });
  };

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

  // const handleStoreChange = (value) => {
  //   setPageConfig((prev) => {
  //     return {
  //       ...prev,
  //       storeId: value,
  //     };
  //   });
  // };

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

  return (
    <>
      <div className="rounded-lg">
        <div className="flex justify-between items-center pt-1 px-3">
        </div>
        <div className="flex flex-col sm:flex-row justify-center gap-3 py-1">
          <div className="flex justify-center flex-wrap gap-2">
            {quickLink
              ?.filter((item) => item.position)
              ?.map((item, index) => (
                <Link
                  key={item.id}
                  to={item.url}
                  className={cn(
                    "group whitespace-nowrap relative flex items-center gap-2 min-w-[100px] max-w-[160px] px-2.5 py-1 rounded-lg cursor-pointer text-[#2563eb] bg-[#2563eb]/10 hover:bg-[#2563eb]/20 hover:shadow-md hover:scale-[1.02] transition-all duration-200 ease-in-out",
                    { "bg-[#8b5cf6]/10 text-[#8b5cf6] hover:bg-[#8b5cf6]/20": index % 2 === 0 }
                  )}>
                  <span
                    className="flex-shrink-0 flex items-center justify-center w-5 h-5 text-[20px] group-hover:scale-110 transition-transform duration-200"
                    dangerouslySetInnerHTML={{ __html: item.icon }}
                  />
                  <p className="flex-1 text-[12px] font-semibold leading-tight capitalize">
                    {item.title}
                  </p>
                  <div className="absolute inset-0 rounded-lg border border-transparent group-hover:border-current opacity-30 transition-all duration-200"></div>
                </Link>
                
              ))}
               {/* <div className="w-[300px] flex justify-center items-center">
            <span className="px-2.5  rounded font-semibold w-full">
              <Select
                className="w-full "
                size="small"
                mode="multiple"
                placeholder={`Select Store (Default: ${
                  defaultStore?.name || "All"
                })`}
                onChange={handleStoreChange}
                showSearch
                optionFilterProp="children"
                filterOption={(input, option) =>
                  option.children.includes(input)
                }
                filterSort={(optionA, optionB) =>
                  optionA.children
                    .toLowerCase()
                    .localeCompare(optionB.children.toLowerCase())
                }
                loading={loading}>
                {list?.map((item) => (
                  <Select.Option key={item.id} value={item.id}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </span>
          </div> */}
          </div> 
            
        </div>
      </div>
    </>
  );
}
