import { useState } from "react";

import { DatePicker, Select } from "antd";
import moment from "moment";
import { useSelector } from "react-redux";
import DashboardCharts from "../RecentContent/DashboardCharts";
import DemoLine from "./Demoline";

const Dashboard = () => {
  const { data, loading: load } = useSelector((state) => state?.setting) || {};
  const { RangePicker } = DatePicker;
  const { list, defaultStore, loading } = useSelector((state) => state.store);
  const [pageConfig, setPageConfig] = useState({
    count: 5,
    startDate: moment().startOf("year").format("YYYY-MM-DD"),
    endDate: moment().endOf("year").format("YYYY-MM-DD"),
  });

  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,
      };
    });
  };
  const handleStoreChange = (value) => {
    setPageConfig((prev) => {
      return {
        ...prev,
        storeId: value,
      };
    });
  };

  let card;
  if (loading) {
    card = (
      <section className="grid sm:grid-cols-2 xl:grid-cols-4 gap-6 mt-5 mb-5">
        <div className="ant-shadow w-full h-[70px] md:h-[120px]  bg-slate-100 animate-pulse rounded-lg "></div>
        <div className="ant-shadow w-full h-[70px] md:h-[120px]  bg-slate-100 animate-pulse rounded-lg "></div>
        <div className="ant-shadow w-full h-[70px] md:h-[120px]  bg-slate-100 animate-pulse rounded-lg "></div>
        <div className="ant-shadow w-full h-[70px] md:h-[120px]  bg-slate-100 animate-pulse rounded-lg "></div>
      </section>
    );
  } else if (data && !loading) {
    card = <DemoLine pageConfig={pageConfig} data={data} />;
  } else if (!data && !loading) {
    card = "";
  }
  return (
    <>
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 p-4 ">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-800 mb-1">
            Dashboard
          </h1>
          <p className="text-sm text-gray-600">
            Overview of your business metrics
          </p>
        </div>

        <div className="flex flex-row sm:flex-row  items-start sm:items-center gap-3 w-full sm:w-auto">
          <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>
          <RangePicker
            className="range-picker w-full sm:w-auto rounded-lg shadow-sm hover:border-blue-500 transition-shadow duration-200"
            onCalendarChange={onCalendarChange}
            // defaultValue={[
            //   dayjs(pageConfig.startDate, "YYYY-MM-DD"),
            //   dayjs(pageConfig.endDate, "YYYY-MM-DD"),
            // ]}
            format="MMM DD, YYYY"
            placeholder={["Start Date", "End Date"]}
            size="large"
          />
        </div>
      </div>
      <div className="mb-5 md:px-6">
        {/* <QuickLink pageConfig={pageConfig} setPageConfig={setPageConfig} /> */}
        {card}
      </div>
      <div className="mb-5 md:px-6">
        {/* {data?.dashboardType === "inventory" ? (
          <InventoryContent pageConfig={pageConfig} />
        ) : (
          <Content pageConfig={pageConfig} />
        )} */}
        {/* create new charts */}
        <DashboardCharts />
      </div>
    </>
  );
};

export default Dashboard;
