import React, { useRef, useState } from "react";

import { Button, Chip, Popover, Stack, Typography } from "@mui/material";
import { ArrowDropDownIcon } from "@mui/x-date-pickers";

import {
  filterDateRangeLabel,
  useDashboardFilter,
} from "../../../../contexts/DashboardFilterContext";
import { filterPresets } from "../../../../types/dashboard";

import PresetList from "./PresetList";

export interface FilterMenuProps {}

const FilterMenu: React.FC<FilterMenuProps> = ({}) => {
  const { filter, setFilter } = useDashboardFilter();
  const anchorRef = useRef<HTMLButtonElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  // const { t } = useI18n();
  const handleClose = () => {
    setIsOpen(false);
  };

  const id = isOpen ? "simple-popover" : undefined;
  // const granularities = [
  //   { label: "Day", value: "day", minSelectedDays: 0 },
  //   { label: "Week", value: "week", minSelectedDays: 7 },
  //   { label: "Month", value: "month", minSelectedDays: 31 },
  //   { label: "Quarter", value: "quarter", minSelectedDays: 90 },
  //   { label: "Year", value: "year", minSelectedDays: 365 },
  // ].filter(
  //   (granularity) =>
  //     granularity.minSelectedDays <= filter.endDate.diff(filter.startDate, "days").days,
  // );

  // const setEndDate = (date: DateTime | null) => {
  //   setFilter({
  //     ...filter,
  //     preset: "custom",
  //     endDate: date ?? filter.endDate,
  //   });
  // };

  return (
    <div>
      <Button
        ref={anchorRef}
        aria-describedby={id}
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1,
          color: "text.primary",
          fontWeight: 500,
        }}
        variant="text"
        onClick={() => setIsOpen(!isOpen)}
      >
        <Chip
          label={filterPresets.find((preset) => preset.value === filter.preset)?.label}
          size="small"
          sx={{ borderRadius: 1 }}
        />
        <Typography variant="body2">{filterDateRangeLabel(filter)}</Typography>
        <ArrowDropDownIcon />
      </Button>
      <Popover
        anchorEl={anchorRef.current}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        id={id}
        open={isOpen}
        onClose={handleClose}
      >
        <Stack direction="row" gap={2}>
          <Stack sx={{ width: 250, borderRight: "1px solid", borderColor: "divider" }}>
            <PresetList
              onChange={(value) => {
                setFilter(value);
                setIsOpen(false);
              }}
            />
          </Stack>
          {/*
          <Stack direction="column" gap={2} p={2} width={350}>
            <Stack alignItems="center" direction="row" gap={2}>
              <DateField
                label="Start date"
                value={filter.startDate}
                onChange={(date) => setFilter({ ...filter, startDate: date ?? filter.startDate })}
              />
              <Typography variant="body2"> - </Typography>
              <DateField label="End date" value={filter.endDate} onChange={setEndDate} />
            </Stack>
            <DateRangePicker />
            <Select
              items={granularities}
              label={t("Granularity")}
              size="small"
              value={filter.granularity}
              onChange={(event) => {
                const granularity = event.target.value;
                if (isGranularity(granularity)) {
                  setFilter({ ...filter, preset: "custom", granularity });
                } else {
                  console.error("Invalid granularity");
                }
              }}
            />
          </Stack>
          */}
        </Stack>
      </Popover>
    </div>
  );
};

export default FilterMenu;