'use client';

import { useState, useEffect } from 'react';

// MATERIAL - UI
import Modal from '@mui/material/Modal';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import CardContent from '@mui/material/CardContent';
import TextField from '@mui/material/TextField';
import CircularLoader from 'components/CircularLoader';

// PROJECT IMPORTS
import MainCard from 'components/MainCard';

interface BasicModalProps {
  openModal: boolean;
  closeModel: () => void;
  save: (userInput: string) => void;
  isLoading: boolean;
  manager: string;
  setManager:any;
}

// ==============================|| MODAL - BASIC ||============================== //

export default function CustomBasicModal({ openModal, closeModel, save, isLoading, manager,setManager }: BasicModalProps) {
  const [open, setOpen] = useState(openModal);
  const [inputValue, setInputValue] = useState(manager); // State to manage user input

  // Sync modal open state with openModal prop
  useEffect(() => {
    setOpen(openModal);
  }, [openModal]);

  const handleClose = () => closeModel();

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = () => {
    if (!inputValue.trim()) return;
    save(inputValue); // Pass the inputValue to save
    setManager(inputValue);
    handleClose();
  };

  return (
    <Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
      <MainCard title="Manager Name" modal darkTitle content={false}>
        <CardContent>
          <TextField
            label="Enter Manager Name"
            value={inputValue} // Prioritize inputValue, fallback to manager
            onChange={handleInputChange} // Update inputValue on change
            fullWidth
            variant="outlined"
            margin="normal"
            helperText={!inputValue?.trim() ? 'Manager name is required' : ''}
            error={!inputValue?.trim()} // Show error if input is empty
          />
        </CardContent>
        <Divider />
        <Stack direction="row" spacing={1} justifyContent="flex-end" sx={{ px: 2.5, py: 2 }}>
          <Button color="error" size="small" onClick={handleClose}>
            Cancel
          </Button>
          {isLoading ? (
            <CircularLoader />
          ) : (
            <Button variant="contained" size="small" onClick={handleSubmit} disabled={!inputValue?.trim()}>
              Submit
            </Button>
          )}
        </Stack>
      </MainCard>
    </Modal>
  );
}