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

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

const App: React.FC = () => {
    const [question, setQuestion] = useState('');
    const [option1, setOption1] = useState('');
    const [option2, setOption2 ] = useState('');
    const [option3, setOption3 ] = useState('');
    const [option4, setOption4 ] = useState('');
    const [moduleId, setModuleId] = useState('');
    const [correctAnswer, setCorrectAnswer] = useState('');

    let moduleList = [
      {
        moduleId : "1",
        moduleName : "Module Name - 1"
      },
      {
        moduleId : "2",
        moduleName : "Module Name - 2"
      },
      {
        moduleId : "3",
        moduleName : "Module Name - 3"
      },
      {
        moduleId : "4",
        moduleName : "Module Name - 4"
      },
      {
        moduleId : "5",
        moduleName : "Module Name - 5"
      }
    ]
    
    // const [moduleList, setModuleList] = useState<QuizModule[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);
    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 = { question, option1, option2, option3, option4, correctAnswer, moduleId };
    setSubmitLoading(true);
    try {
      const response = await fetch(`http://localhost:5174/api/create-question`, {
        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 Question</Button>
      <Modal title="Add New Question" 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="question">Question:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={question} onChange={(e) => setQuestion(e.target.value)} type="text" name='question' id='question'/>
              </div>
              <div className='flex flex-col mb-4'>
                <label htmlFor="option1">Option 1:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option1} onChange={(e) => setOption1(e.target.value)} type="text" name='option1' id='option1'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="option2">Option 2:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option2} onChange={(e) => setOption2(e.target.value)} type="text" name='option2' id='option2'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="option3">Option 3:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option3} onChange={(e) => setOption3(e.target.value)} type="text" name='option3' id='option3'/>
              </div>
              <div className='flex flex-col'>
                <label htmlFor="option4">Option 4:</label>
                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option4} onChange={(e) => setOption4(e.target.value)} type="text" name='option4' id='option4'/>
              </div>
              <div className='flex flex-col' >
                <label htmlFor="option4">Correct Answer:</label>
                <select value={correctAnswer} onChange={(e) => setCorrectAnswer(e.target.value)} name="correctAnswer" id="correctAnswer" className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2'>
                    <option value="">-Select-</option>
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                    <option value="option4">Option 4</option>
                </select>
              </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)}>
                    <option value="">-Select-</option>
                    {
                        moduleList.map((module => (
                            <option key={module.moduleId} value={module.moduleId}>{module.moduleName}</option>
                        )))
                    }
                </select>
              </div>
              <br />
              <button className='bg-[#000] py-2.5 text-[#FFF] rounded-[10px]' type="submit">Submit</button>
            </form>
          </div>
        )}
      </Modal>
    </>
  );
};

export default App;
// quizList