"use client";

import { FC, useState, useEffect } from "react";
import { Box, Grid, TextField, Select, MenuItem } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers-pro";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";

interface QueryDateRangeSelectorProps {}

export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
  const t = useTranslate();
  const [relativeDate, setRelativeDate] = useState("");
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const { updateQuery, query } = useAppContext();
  useEffect(() => {
    setStartDate(query.startDate.values[0] ?? null);
    setEndDate(query.endDate.values[0] ?? null);
    setRelativeDate(query.relativeDate.values[0] ?? "");
  }, [query, setStartDate, setEndDate, setRelativeDate]);

  return (
    <Box sx={{ height: 305, width: "100%", pt: 2 }}>
      <Grid container direction="column">
        <Grid item xs={12} sx={{ mb: 2 }}>
          <Select
            fullWidth
            size="small"
            placeholder={t("relativeDate")}
            value={relativeDate}
            onChange={(event: any) => {
              setStartDate(null);
              setEndDate(null);
              setRelativeDate(event.target.value);
              updateQuery({
                startDate: { values: [] },
              });
              updateQuery({
                endDate: { values: [] },
              });
              updateQuery({
                relativeDate: { values: [event.target.value] },
              });
            }}
          >
            <MenuItem value={7}>{t("last7Days")}</MenuItem>
            <MenuItem value={30}>{t("last30Days")}</MenuItem>
            <MenuItem value={90}>{t("last3Months")}</MenuItem>
            <MenuItem value={180}>{t("last6Months")}</MenuItem>
            <MenuItem value={365}>{t("lastYear")}</MenuItem>
            <MenuItem value={730}>{t("last2Years")}</MenuItem>
          </Select>
        </Grid>
        <Grid item sx={{ textAlign: "center", mb: 2 }}>
          – or –
        </Grid>
        <Grid item xs={12}>
          <DatePicker
            label={t("startDate")}
            value={startDate}
            onChange={(date) => {
              setStartDate(date);
              updateQuery({
                startDate: { values: [date] },
              });
            }}
            // @ts-ignore
            renderInput={(params) => (
              <TextField
                {...params}
                sx={{
                  width: "100%",
                  color: "black",
                  "& .MuiOutlinedInput-root": {
                    borderBottomLeftRadius: 0,
                    borderBottomRightRadius: 0,
                  },
                }}
                size="small"
              />
            )}
          />
        </Grid>
        <Grid item xs={12}>
          <DatePicker
            label={t("endDate")}
            value={endDate}
            onChange={(date) => {
              setEndDate(date);
              updateQuery({
                endDate: { values: [date] },
              });
            }}
            // @ts-ignore
            renderInput={(params) => (
              <TextField
                {...params}
                sx={{
                  backgroundColor: "white",
                  mt: "-1px",
                  width: "100%",
                  color: "black",
                  "& .MuiOutlinedInput-root": {
                    borderTop: 0,
                    borderTopLeftRadius: 0,
                    borderTopRightRadius: 0,
                  },
                }}
                size="small"
              />
            )}
          />
        </Grid>
      </Grid>
    </Box>
  );
};