import React, { useState, useEffect } from "react";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { Button, Box } from "@mui/material";
import TextField from "@mui/material/TextField";
import { NavLink, Link, useNavigate } from "react-router-dom";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { useDispatch,useSelector } from "react-redux";
import { updateSystemNo } from "../redux/actions/actions";


const SystemNumberDialog = (setShowSystemNoContainer,showSystemNoContainer) => {
  const dispatch = useDispatch();
  const navigate = useNavigate()
  const [open, setOpen] = useState(true); // Set open state to true by default
  const reduxSystemNo = useSelector((state)=>state?.systemNumber)
  console.log("Redux system No : ",reduxSystemNo)
  const [systemNo, setSystemNo] = useState(1);
  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = () => {
    console.log("Handling submit")
    dispatch(updateSystemNo(systemNo));
    navigate("/")
    handleClose(true)
  };

  useEffect(()=>{
      console.log("System No in useEffect : ",systemNo)
  },[systemNo])

  const numberOfSystems = 5;
  const selectValues = [];
  for (var i = 1; i <= numberOfSystems; i++) {
    selectValues.push({ value: Number(i), systemLabel: `System ${i}` });
  }

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Choose Your System Number:</DialogTitle>
      <DialogContent>
        <DialogContentText>
          <Select
            labelId="system-no-select-label"
            id="system-no-select"
            className="w-100"
            label="System No"
            value={systemNo}
            onChange={(e) => {
              setSystemNo(e.target.value);
            }}
          >
            {selectValues.length > 0 &&
              selectValues.map((value) => (
                <MenuItem value={value.value}>{value.systemLabel}</MenuItem>
              ))}
          </Select>

          <Box className="d-flex justify-content-end gap-2 my-3">
            <Button
              className="bg-primary p-2 text-light"
              onClick={handleSubmit}
            >
              Submit
            </Button>
          </Box>
        </DialogContentText>
      </DialogContent>
    </Dialog>
  );
};

export default SystemNumberDialog;