import React, { useContext, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import {
  provinceSendReportGetTimes,
  provinceSendReportUpdateSendTime,
} from "../../services/province-send-report-get-times";
import { Grid } from "../../../../components/grid/Grid";
import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";
import { AppContext } from "../../../../contexts/AppContext";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";

export const ProvinceSendReportSendTime = ({ fetchApiData }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const [time, setTime] = useState(12);
  const [delay, setDelay] = useState("روزانه");

  useEffect(() => {
    dispatch(provinceSendReportGetTimes()).then((r) => {
      setTime(r.payload?.data?.hour);
      setDelay(r?.payload?.data?.type);
    });
  }, []);

  const handleChangeTime = (e) => {
    setTime(e.target.value);
  };

  const handleChangeDelay = (e) => {
    setDelay(e.target.value);
  };

  return (
    <Grid xs={12} container gap={2}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">ارسال</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          label="ارسال"
          value={delay}
          onChange={handleChangeDelay}
        >
          <MenuItem value={"روزانه"}>روزانه</MenuItem>
          <MenuItem value={"یک روز در میان"}>یک روز در میان</MenuItem>
        </Select>
      </FormControl>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">ساعت</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          label="ساعت"
          value={time}
          onChange={handleChangeTime}
        >
          <MenuItem value={1}>1</MenuItem>
          <MenuItem value={2}>2</MenuItem>
          <MenuItem value={3}>3</MenuItem>
          <MenuItem value={4}>4</MenuItem>
          <MenuItem value={5}>5</MenuItem>
          <MenuItem value={6}>6</MenuItem>
          <MenuItem value={7}>7</MenuItem>
          <MenuItem value={8}>8</MenuItem>
          <MenuItem value={9}>9</MenuItem>
          <MenuItem value={10}>10</MenuItem>
          <MenuItem value={11}>11</MenuItem>
          <MenuItem value={12}>12</MenuItem>
          <MenuItem value={13}>13</MenuItem>
          <MenuItem value={14}>14</MenuItem>
          <MenuItem value={15}>15</MenuItem>
          <MenuItem value={16}>16</MenuItem>
          <MenuItem value={17}>17</MenuItem>
          <MenuItem value={18}>18</MenuItem>
          <MenuItem value={19}>19</MenuItem>
          <MenuItem value={20}>20</MenuItem>
          <MenuItem value={21}>21</MenuItem>
          <MenuItem value={22}>22</MenuItem>
          <MenuItem value={23}>23</MenuItem>
          <MenuItem value={24}>24</MenuItem>
        </Select>
      </FormControl>
      <Button
        variant="contained"
        fullWidth
        onClick={() => {
          dispatch(
            provinceSendReportUpdateSendTime({
              type: delay,
              hour: time,
            })
          ).then((r) => {
            if (r.payload.error) {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: r.payload.error,
                severity: "error",
              });
            } else {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "عملیات با موفقیت انجام شد.",
                severity: "success",
              });
              fetchApiData(1);
              dispatch(CLOSE_MODAL());
            }
          });
        }}
      >
        ثبت
      </Button>
    </Grid>
  );
};
