import React, { useState, useEffect, FormEvent } from 'react';
import { Button, Modal, Spin } from 'antd';

interface QuizModule {
  moduleId: string;
  moduleName: string;
}

const App: React.FC = () => {
  const [moduleList, setModuleList] = useState<QuizModule[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const [quizName, setQuizName] = useState('');
  const [totalQuestion, settotalQuestion] = useState('');
  const [attendance, setAttendance] = useState('');
  const [internalMarks, setInternalMarks] = useState('');
  const [moduleId, setModuleId] = useState('');
  const [open, setOpen] = useState<boolean>(false);
  const [submitLoading, setSubmitLoading] = useState<boolean>(false);

  useEffect(() => {
    fetch(`http://localhost:5174/api/quiz-module-list`)
      .then((res) => {
        if (!res.ok) {
          throw new Error('Network response was not ok');
        }
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setModuleList(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('An error occurred', error);
        setError(error);
        setLoading(false);
      });
  }, []);

  const handleModuleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = {
      quizName,
      totalQuestion,
      attendance,
      internalMarks,
      moduleId,

    };
    setSubmitLoading(true);
    try {
      const response = await fetch(`http://localhost:5174/api/create-quiz`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
      if (!response.ok) {
        throw new Error('Network Response not ok');
      }
      const result = await response.json();
      console.log('Success', result);
      setOpen(false); // Close the modal on successful submission
      // Optionally, refresh the quiz list here
    } catch (error) {
      console.error('Error', error);
    } finally {
      setSubmitLoading(false);
    }
  };

  const showLoading = () => {
    setOpen(true);
  };

  if (loading) {
    return <Spin size="large" />;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <>
      <Button type="primary" onClick={showLoading}>New Module</Button>
      <Modal title="Loading Modal" centered footer={false} open={open} onCancel={() => setOpen(false)}>
        {submitLoading ? (
          <Spin size="large" />
        ) : (
          <div className='container mx-auto px-4'>
            <form onSubmit={handleModuleSubmit} className='flex flex-col'>
              <div className='flex flex-col mb-4'>
                <label htmlFor="quizName">Quiz Name:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={quizName} onChange={(e) => setQuizName(e.target.value)} type="text" name='quizName' id='quizName'/>
              </div>
              <div className='flex flex-col mb-4'>
                <label htmlFor="totalQuestion">Total Question:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={totalQuestion} onChange={(e) => settotalQuestion(e.target.value)} type="text" name='totalQuestion' id='totalQuestion'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="attendance">Attendance:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={attendance} onChange={(e) => setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="attendance">Attendance:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={attendance} onChange={(e) => setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="internalMarks">Internal Marks:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={internalMarks} onChange={(e) => setInternalMarks(e.target.value)} type="text" name='internalMarks' id='internalMarks'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="moduleId">Module ID:</label>
                <select className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' name="moduleId" id="moduleId" value={moduleId} onChange={(e) => setModuleId(e.target.value)}>
                  {
                    moduleList.map((module => (
                      <option key={module.moduleId} value={module.moduleId}>{module.moduleName}</option>
                    )))
                  }
                </select>
                <input   type="text" name='moduleId' id='moduleId'/>
              </div>
              
              <br />
              <button className='bg-[#000] py-2.5 text-[#FFF] rounded-[10px]' type="submit">Submit</button>
            </form>
          </div>
        )}
      </Modal>
    </>
  );
};
export default App;
// quizList