import { Button, TextField, Typography } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment/moment";
import { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";

export const KillProcessStats = ({ province }) => {
  const [selectedDate1, setSelectedDate1] = useState(
    moment(new Date()).format("YYYY-MM-DD")
  );
  const [selectedDate2, setSelectedDate2] = useState(
    moment(new Date()).format("YYYY-MM-DD")
  );

  useEffect(() => {
    var currentDate = moment(selectedDate1);
    var newDate = currentDate.add(7, "days").format("YYYY-MM-DD");
    setSelectedDate2(newDate);
  }, [selectedDate1]);

  return (
    <Grid container alignItems="center" gap={SPACING.SMALL}>
      <Grid container alignItems="center" gap={SPACING.TINY}>
        <Typography>روند کشتار بر اساس بازه</Typography>
        <DatePicker
          label="از تاریخ"
          id="date"
          renderInput={(params) => (
            <TextField style={{ width: "160px" }} {...params} />
          )}
          value={selectedDate1}
          onChange={(e) => {
            setSelectedDate1(moment(e).format("YYYY-MM-DD"));
          }}
        />{" "}
        <DatePicker
          label="تا تاریخ"
          id="date"
          disabled={true}
          renderInput={(params) => (
            <TextField style={{ width: "160px" }} {...params} />
          )}
          value={selectedDate2}
          onChange={(e) => {
            setSelectedDate2(moment(e).format("YYYY-MM-DD"));
          }}
        />
      </Grid>
      <a
        href={`${province}killing_process_from_date_excel/?start=${selectedDate1}&end=${selectedDate2}`}
        rel="noreferrer"
      >
        <Button variant="outlined" size="large">
          دانلود
        </Button>
      </a>
    </Grid>
  );
};
