'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';

//import async from '../../../app/(dashboard)/apps/e-commerce/product-details/[id]/page';
interface BasicModalProps {
  openModal: boolean;
  closeModel: () => void;
  save: (userInput: string) => void;
  isLoading: boolean;
}

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

export default function CustomBasicModalMessage({ openModal, closeModel, save, isLoading }: BasicModalProps) {
  const [open, setOpen] = useState(openModal);
  const [userInput, setUserInput] = useState<string>('');
  const [inputError, setInputError] = useState<boolean>(false);
  //const [loading, setLoading] = useState<boolean>(false); // State to track saving/loading

  //  useEffect(()=>{
  //    setOpen(true);
  //  },[])

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

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setUserInput(event.target.value); // Update user input state on change
    setInputError(false); // Reset error state on input change
  };


  // useEffect(()=>{
  //   setMyManager(user)
  // },[userInput])

  const handleSaveClick = async () => {
    if (userInput.trim() === '') {
      setInputError(true); // Set error state if input is empty
      return;
    }
    save(userInput);
    // setUserInput(userInput);
    // setMyManager(userInput);
    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={userInput} // The input value from state
              onChange={handleInputChange} // Handle input change
              fullWidth // TextField takes the full width of the parent container
              variant="outlined" // Using outlined variant
              margin="normal" // Adds some margin around the TextField
              error={inputError} // Show error if input is empty
              helperText={inputError ? 'Manager name is required' : ''} // Display error message
            />
          </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={handleSaveClick}>
                Submit
              </Button>
            )}
          </Stack>
        </MainCard>
      </Modal>
    </>
  );
}