import React, { useEffect } from "react";
import { Button, Dropdown } from "react-bootstrap";
import { DropdownButton, Image } from "react-bootstrap";
import styles from "@/styles/Component/Dashboard/GraphFilter.module.scss";
import DateRangeComp from "@/components/common/DateRangePicker";
import moment from "moment";
import { useApp } from "@/components/App";
import { calculateDateRange } from "@/utils/filterBasedRangeDate";

const timeFilterOptions = {
  daily: "Daily",
  weekly: "Weekly",
  monthly: "Monthly",
  quarterly: "Quarterly",
  yearly: "yearly",
  week_days: "Week Days",
  this_week: "This Week",
  this_month: "This Month",
  this_quarter: "This Quarter",
  this_year: "This Year",
  last_week: "Last Week",
  last_month: "Last Month",
  last_quarter: "Last Quarter",
  last_year: "Last Year",
  last_7_days: "Last 7 Days",
  last_10_days: "Last 10 Days",
  last_20_days: "Last 20 Days",
  last_30_days: "Last 30 Days",
  last_90_days: "Last 90 Days",
  custom: "Custom"
} as const;

type TimeFilterType = keyof typeof timeFilterOptions;

interface FilterProps {
  selectedFilter: string;
  setSelectedFilter: (filter: string) => void;
  setSearch: (value: string) => void;
  dateRange: {
    startDate: string;
    endDate: string;
  };
  setDateRange: (range: { startDate: string; endDate: string }) => void;
}

function Filter({
  selectedFilter,
  setSelectedFilter,
  setSearch,
  dateRange,
  setDateRange
}: FilterProps) {
  const { userDetail } = useApp();

  const handleCallback = (start: moment.Moment, end: moment.Moment) => {
    setDateRange({
      startDate: start.format("DD/MM/YYYY"),
      endDate: end.format("DD/MM/YYYY")
    });


    switch (selectedFilter) {
      case 'daily':
      case 'weekly':
      case 'monthly':
      case 'quarterly':
      case 'yearly':
      case 'week_days':
        break;
      default:
        setSelectedFilter('custom');
    }
    
    // if (selectedFilter !== "custom") {
    //   setSelectedFilter("custom");
    // }
  };

  const handleFilterChange = (filter: TimeFilterType) => {
    setSelectedFilter(filter);
    const newDateRange = calculateDateRange(filter, userDetail?.created_at);
    if (newDateRange) {
      setDateRange(newDateRange);
    }
  };

  const handleResetFilters = () => {
    handleFilterChange("monthly");
    setSearch("");
  };

  useEffect(() => {
    handleFilterChange("monthly");
  }, [])

  return (
    <div className={`${styles.GraphFIlterCard}`}>
      <DateRangeComp
        initialSettings={dateRange}
        onEvent={() => {}}
        onCallback={handleCallback}
      >
        <div className="datePickerCard">
          <i>
            <Image src="/assets/icon11.png" alt="icon11" />
          </i>
          <span>
            {moment(dateRange.startDate, "DD/MM/YYYY").format("DD/MM/YYYY")} -{" "}
            {moment(dateRange.endDate, "DD/MM/YYYY").format("DD/MM/YYYY")}
          </span>
        </div>
      </DateRangeComp>

      <DropdownButton
        id="dropdown-basic-button"
        title={timeFilterOptions[selectedFilter] || "filters options"}
        variant="outline-secondary"
        className={`${styles.FIlterCustomDropdown} customDropdown`}
        style={{ marginLeft: 16, border: "none !important" }}
      >
        {Object.keys(timeFilterOptions).map(key => (
          <Dropdown.Item
            key={key}
            onClick={() => handleFilterChange(key as TimeFilterType)}
          >
            {timeFilterOptions[key as TimeFilterType]}
          </Dropdown.Item>
        ))}
      </DropdownButton>

      <Button className={styles.BtnCustom} onClick={handleResetFilters}>
        Reset Filters
      </Button>
    </div>
  );
}

export default Filter;