import React, { useEffect, useRef } from 'react';
import { Table, Row, Col, Button, Form, Modal, InputGroup, Accordion, Breadcrumb, Spinner } from 'react-bootstrap';
import { Link, useParams } from 'react-router-dom';
import useUpdateExercises from '../hooks/useUpdateExercises';
import ModalOperation from '../../../../components/ui/adminMessageModal/ModalOperation';
import {ReactSortable } from 'react-sortablejs';

import VideoPlayer from './components/VideoPlayer';

const mpColors = ['#FC6454',  '#FBD025', '#46E59A', '#0090FF','#E355D5'];

const UpdateExercises = () => {
    const { levelId } = useParams();
    const { 
        loading, 
        error, 
        exerciseData, 
        setExerciseData,
        formData, 
        levelName,
        sectionName, 
        topicName, 
        mediaPath, 
        mediaPreview,
        handleFormChange, 
        handleFormChangeAnswer,
        handleFormChangeMedia,
        handleFormResetMedia,
        updateMaterials,
        showLoader,
        handleCloseLoader,
        loaderState,

        createQuestion,
        updateQuestion,        
        deleteQuestion,
        sortingQuestion,
        
        selectedQuestion,
        selectedQuestionNumber,
        show,
        handleShow,
        handleClose,
        handleShowNewData,

        validUrl,
        handleCheckUrl,
        handleUrlInput,
        showUrlModal,
        handleShowUrlModal,
        handleCloseUrlModal,
        handleSetVideoUrl
    } = useUpdateExercises(levelId);


    const triggerFileInput = (e) => {
        e.target.previousElementSibling.click();
    };

    return (
        <div className='admin-teachers'>
            <Row className='mb-45'>
                <Col className="d-flex align-items-center breadcrumb-con">
                    <Button as={Link} className='btn btn-blue btn-square-back' to='/admin/material'>
                        <i className="bi bi-arrow-90deg-left"></i>
                    </Button>
                    <Breadcrumb className='custom-breadcrumb'>
                        <Breadcrumb.Item href="#">Learning</Breadcrumb.Item>
                        <Breadcrumb.Item href="/admin/material" className='text-capitalize'>Exercise</Breadcrumb.Item>
                        <Breadcrumb.Item active>Update Exercise</Breadcrumb.Item>
                    </Breadcrumb>
                </Col>
            </Row>
            <Row className='mb-0'>
                <Col>
                    <div className="cards rounded-top combine combine-top">
                        <div className="cards-title d-flex">
                            <h4>{sectionName} : {topicName} - <span className='text-blue'>{levelName}</span></h4>
                        </div>
                    </div>
                </Col>
            </Row>
            <Row className='mb-45'>
                <Col className='h-fit'>
                    
                    {/* <div className="cards">
                        <div className="cards-title d-flex justify-content-between">
                            <div className="d-flex align-items-center">
                                <span style={{ cursor: 'grab' }}><i className="bi bi-list me-3" /></span>
                                <h4>1</h4>
                                <h4>.Multiple Choice</h4>
                            </div>
                            <div className="d-flex">
                                <Button size='sm' variant='outline-warning' className='me-2 border'><i className="bi bi-pencil me-1"></i>edit</Button>
                                <Button size='sm' variant='outline-danger' className='border'><i className="bi bi-trash3"></i></Button>
                            </div>
                        </div>
                        <div className="cards-body">
                            <Row className='mb-2'>
                                <Col className='d-flex align-items-center'>
                                    <img src="https://picsum.photos/300/200" alt="" className='me-2 bg-light' style={{aspectRatio:"1/1",width:"5vw",objectPosition:"center",objectFit:"contain"}}/>
                                    <p className='m-0 fs-14p'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum assumenda tenetur nostrum, consequatur mollitia ea dignissimos adipisci rerum nesciunt laboriosam laborum ut atque beatae facilis nam illum impedit quia eius.</p>
                                </Col>
                            </Row>
                            <span className='fs-12p'>Question Choices</span>
                            <Row>
                                <Col md={6} className='d-flex align-items-center'>
                                    <i className="bi bi-check text-success fs-5 me-1"></i><span className='fs-14p'>gatau</span>
                                </Col>
                                <Col md={6} className='d-flex align-items-center'>
                                    <i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>ya ini</span>
                                </Col>
                                <Col md={6} className='d-flex align-items-center'>
                                    <i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>ya itu</span>
                                </Col>
                                <Col md={6} className='d-flex align-items-center'>
                                    <i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>gatau ini</span>
                                </Col>
                            </Row>
                        </div>
                    </div> */}

                    {loading?(
                        <div className='w-100 d-flex justify-content-center align-items-center' style={{height:"20vh"}}>
                            <Spinner animation="grow" variant="primary" />
                            <Spinner animation="grow" variant="secondary" />
                            <Spinner animation="grow" variant="success" />
                            <Spinner animation="grow" variant="danger" />
                            <Spinner animation="grow" variant="warning" />
                            <Spinner animation="grow" variant="info" />
                        </div>
                    ):(
                        <>
                            <Col className='mb-3 sticky-top' style={{top:'-25px'}}>
                                <div className="cards shadow-sm combine combine-bottom">
                                    <div className="cards-title border-0 d-flex justify-content-between align-items-center">
                                        <h4 className='mb-0'>{exerciseData.length} Question</h4>
                                        <Button size='sm' variant='blue' className='px-5 rounded-3' onClick={sortingQuestion}>Save</Button>
                                    </div>
                                </div>
                            </Col>
                            <ReactSortable
                                list={exerciseData} 
                                setList={setExerciseData}
                                handle=".handle"
                            >
                                {exerciseData.map((data, index) => (
                                    <div className="cards cards-exercise mb-3"  key={data.ID_ADMIN_EXERCISE}>
                                        <div className="cards-title d-flex justify-content-between">
                                            <div className="d-flex align-items-center">
                                                <span style={{ cursor: 'grab' }} className='handle'><i className="bi bi-list me-3" /></span>
                                                <h4>{index+1}</h4>
                                                <h4>. {data.QUESTION_TYPE}</h4>
                                            </div>
                                            <div className="d-flex align-items-center">
                                                <h4 className='mb-0 me-3'>{data.SCORE_WEIGHT} point</h4>
                                                <Button size='sm' variant='outline-warning' className='me-2 border' onClick={() => handleShow(index)}><i className="bi bi-pencil me-1"></i>edit</Button>
                                                <Button size='sm' variant='outline-danger' className='border' onClick={() => deleteQuestion(index)}><i className="bi bi-trash3"></i></Button>
                                            </div>
                                        </div>
                                        <div className="cards-body">
                                            <Row>
                                                <Col className={`d-flex ${data.AUDIO?"flex-column":"align-items-center"}`}>
                                                    {data.IMAGE?(
                                                        <img src={`${mediaPath}/image/${data.IMAGE}`} alt="" 
                                                            className='me-2 bg-light cursor-pointer' 
                                                            style={{aspectRatio:"3/2",width:"10vw",objectPosition:"center",objectFit:"contain"}}
                                                            onClick={() => handleShow(index)}
                                                        />
                                                    ):(
                                                        data.AUDIO?(
                                                            <audio controls style={{height:"30px", marginBottom:"8px"}}
                                                                src={`${mediaPath}/audio/${data.AUDIO}`}
                                                            >
                                                            </audio>
                                                        ):(
                                                            data.VIDEO?(
                                                                <div className='cursor-pointer'  onClick={() => handleShow(index)}>
                                                                    <VideoPlayer url={data.VIDEO} con="main"/>
                                                                </div>
                                                            ):(
                                                                <></>
                                                            )
                                                        )
                                                    )}
                                                    <p className='m-0 fs-14p'>{data.QUESTION}</p>
                                                </Col>
                                            </Row>
                                            <span className='fs-12p'>Answer Key :</span>
                                            {data.QUESTION_TYPE === "TFQ"?(
                                                <Row>
                                                    <Col md={6} className='d-flex align-items-center'>
                                                        {data.trueFalse[0].IS_TRUE === 1 || data.trueFalse[0].IS_TRUE === "1" ?(
                                                            <i className="bi bi-check text-success fs-5 me-1"></i>
                                                        ):(
                                                            <i className="bi bi-x text-red fs-5 me-1"></i>
                                                        )}
                                                        <span className='fs-14p'>True</span>
                                                    </Col>
                                                    <Col md={6} className='d-flex align-items-center'>
                                                        {data.trueFalse[0].IS_TRUE === 0 || data.trueFalse[0].IS_TRUE === "0" ?(
                                                            <i className="bi bi-check text-success fs-5 me-1"></i>
                                                        ):(
                                                            <i className="bi bi-x text-red fs-5 me-1"></i>
                                                        )}
                                                        <span className='fs-14p'>False</span>
                                                    </Col>
                                                </Row>
                                            ):(
                                                data.QUESTION_TYPE === "MCQ"?(
                                                    <Row>
                                                        <Col md={6} className='d-flex align-items-center'>
                                                            {data.multipleChoices[0].ANSWER_KEY === "A"?(
                                                                <i className="bi bi-check text-success fs-5 me-1"></i>
                                                            ):(
                                                                <i className="bi bi-x text-red fs-5 me-1"></i>
                                                            )}
                                                            <span className='fs-14p'>
                                                                {data.multipleChoices[0].OPTION_A}
                                                            </span>
                                                        </Col>
                                                        <Col md={6} className='d-flex align-items-center'>
                                                            {data.multipleChoices[0].ANSWER_KEY === "B"?(
                                                                <i className="bi bi-check text-success fs-5 me-1"></i>
                                                            ):(
                                                                <i className="bi bi-x text-red fs-5 me-1"></i>
                                                            )}
                                                            <span className='fs-14p'>
                                                                {data.multipleChoices[0].OPTION_B}
                                                            </span>
                                                        </Col>
                                                        <Col md={6} className='d-flex align-items-center'>
                                                            {data.multipleChoices[0].ANSWER_KEY === "C"?(
                                                                <i className="bi bi-check text-success fs-5 me-1"></i>
                                                            ):(
                                                                <i className="bi bi-x text-red fs-5 me-1"></i>
                                                            )}
                                                            <span className='fs-14p'>
                                                                {data.multipleChoices[0].OPTION_C}
                                                            </span>
                                                        </Col>
                                                        <Col md={6} className='d-flex align-items-center'>
                                                            {data.multipleChoices[0].ANSWER_KEY === "D"?(
                                                                <i className="bi bi-check text-success fs-5 me-1"></i>
                                                            ):(
                                                                <i className="bi bi-x text-red fs-5 me-1"></i>
                                                            )}
                                                            <span className='fs-14p'>
                                                                {data.multipleChoices[0].OPTION_D}
                                                            </span>
                                                        </Col>
                                                        {data.multipleChoices[0].OPTION_E?(
                                                            <Col md={6} className='d-flex align-items-center'>
                                                                {data.multipleChoices[0].ANSWER_KEY === "E"?(
                                                                    <i className="bi bi-check text-success fs-5 me-1"></i>
                                                                ):(
                                                                    <i className="bi bi-x text-red fs-5 me-1"></i>
                                                                )}
                                                                <span className='fs-14p'>
                                                                    {data.multipleChoices[0].OPTION_E}
                                                                </span>
                                                            </Col>
                                                        ):(
                                                            <></>
                                                        )}
                                                    </Row>
                                                ):(
                                                    <div className='mt-1'>
                                                        {data.matchingPairs.map((dataMp, index) => (
                                                            <Row key={index}>
                                                                <Col md={6} className='px-5 d-flex align-items-center'>
                                                                    <div className='mb-2 py-1 px-3 w-100 rounded-pill' style={{backgroundColor: mpColors[index]}}>
                                                                        <span className='fs-14p text-white'>{dataMp.LEFT_PAIR}</span>
                                                                    </div>
                                                                </Col>
                                                                <Col md={6} className='px-5 d-flex align-items-center'>
                                                                    <div className='mb-2 py-1 px-3 w-100 rounded-pill' style={{backgroundColor: mpColors[index]}}>
                                                                        <span className='fs-14p text-white'>{dataMp.RIGHT_PAIR}</span>
                                                                    </div>
                                                                </Col>
                                                            </Row>
                                                        ))}
                                                    </div>
                                                )
                                            )}
                                        </div>
                                    </div>
                                ))}
                            </ReactSortable>
                            <div className='w-100 mt-4 p-3 bg-white rounded-4'>
                                <Button variant='blue' className='py-2 px-5 w-100 rounded-35' onClick={() => handleShowNewData()}>
                                    + add question
                                </Button>
                            </div>
                        </>
                    )}
                </Col>
            </Row>

            <Modal show={show} onHide={handleClose} className='modal-admin' scrollable fullscreen="lg-down" size='xl' centered backdrop="static">
                <Modal.Header closeButton>
                    <Modal.Title>Question Editor</Modal.Title>
                </Modal.Header>
                <Modal.Body className='pt-0'>
                        <Form onSubmit={(e) => { e.preventDefault(); selectedQuestion?updateQuestion():createQuestion(); }}>
                            <div className="sticky-top py-2 px-3 mb-3 rounded-bottom shadow-sm bg-white d-flex justify-content-between align-items-center">
                                <h4 className='m-0'>{selectedQuestionNumber ? `Question ${selectedQuestionNumber}` : "New Question"}</h4>
                                <Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
                                    Save
                                </Button>
                            </div>

                            {selectedQuestion?(
                                <></>
                            ):(
                                <Row className='mb-2'>
                                    <Form.Group as={Col} className='mb-2 col-6 col-lg-3'>
                                        <Form.Label>Question Type<sup className='text-red fw-bold'>*</sup></Form.Label>
                                        <InputGroup className="input-group-icon">
                                            <InputGroup.Text id="basic-addon1"><i className="bi bi-braces"></i></InputGroup.Text>
                                            <Form.Select aria-label="teacher select" 
                                                required
                                                name='QUESTION_TYPE'
                                                defaultValue={formData.QUESTION_TYPE}
                                                onChange={handleFormChange} 
                                            >
                                                <option value="" disabled hidden>Question Type</option>
                                                <option value="MCQ">Multiple Choice</option>
                                                <option value="TFQ">True / False</option>
                                                <option value="MPQ">Matching Pairs</option>
                                            </Form.Select>
                                        </InputGroup>
                                    </Form.Group>
                                </Row>
                            )}

                            <Row className="mb-2">
                                <Form.Group as={Col} controlId="formGridEmail">
                                    <Form.Label>Question<sup className='text-red fw-bold'>*</sup></Form.Label>
                                    <Form.Control 
                                        required
                                        as="textarea" 
                                        rows={3} 
                                        className='mb-2' 
                                        placeholder='Type the Question here...'
                                        name='QUESTION'
                                        value={formData.QUESTION || ''}
                                        onChange={handleFormChange} 
                                    />
                                </Form.Group>
                            </Row>

                            <Row className='mb-2'>
                                <Col xs={12}>
                                    <Form.Label>Media (optional)</Form.Label>
                                    
                                    {formData.IMAGE?(
                                        <div className='mb-2 w-100 rounded-3 d-flex flex-column justify-content-start align-items-center' style={{border: "2px dashed #dee2e6"}}>
                                            <Button variant='red' size='sm' className='ms-auto rounded-3'
                                                onClick={()=>{handleFormResetMedia();}}
                                                style={{marginBottom:"-3%"}}
                                            >
                                                <i className="bi bi-trash3"></i>
                                            </Button>
                                            {mediaPreview?(
                                                <img src={mediaPreview} alt="" className='my-2 bg-light' style={{aspectRatio:"3/2",height:"35vh",width:"auto",objectPosition:"center",objectFit:"contain"}}/>
                                                ):(
                                                <img src={`${mediaPath}/image/${formData.IMAGE}`} alt="" className='my-2 bg-light' style={{aspectRatio:"3/2",height:"35vh",width:"auto",objectPosition:"center",objectFit:"contain"}}/>
                                            )}
                                        </div>
                                    ):(
                                        formData.AUDIO?(
                                            <div className='mb-2 w-100 rounded-3 d-flex flex-column justify-content-start align-items-center' style={{border: "2px dashed #dee2e6"}}>
                                                <Button variant='red' size='sm' className='ms-auto rounded-3'
                                                    onClick={()=>{handleFormResetMedia();}}
                                                    style={{marginBottom:"-3%"}}
                                                >
                                                    <i className="bi bi-trash3"></i>
                                                </Button>
                                                {mediaPreview?(
                                                    <audio controls className='my-2'
                                                        src={mediaPreview}
                                                    >
                                                    </audio>
                                                ):(
                                                    <audio controls className='my-2'
                                                        src={`${mediaPath}/audio/${formData.AUDIO}`}
                                                    >
                                                    </audio>
                                                )}
                                            </div>
                                        ):(
                                            formData.VIDEO?(
                                                <div className='mb-2 w-100 rounded-3 d-flex flex-column justify-content-start align-items-center' style={{border: "2px dashed #dee2e6"}}>
                                                    <Button variant='red' size='sm' className='ms-auto rounded-3'
                                                        onClick={()=>{handleFormResetMedia();}}
                                                        style={{marginBottom:"-3%"}}
                                                    >
                                                        <i className="bi bi-trash3"></i>
                                                    </Button>
                                                    <VideoPlayer url={formData.VIDEO} con="modal" />
                                                </div>
                                            ):(
                                                <div className='mb-2 w-100 rounded-3 d-flex justify-content-around align-items-center' style={{border: "2px dashed #dee2e6"}}>
                                                    <div className='py-2 h-100 d-flex align-items-center'>
                                                        <Form.Control type='file' accept="audio/*"
                                                            placeholder="Choose Audio"
                                                            aria-label="fullname"
                                                            aria-describedby="basic-addon1"
                                                            className='d-none'
                                                            name='AUDIO'
                                                            onChange={handleFormChangeMedia}
                                                        />
                                                        <Button variant='light' 
                                                            style={{aspectRatio:"4/2",width:"auto", height:"16vh"}}
                                                            onClick={(e) => {e.preventDefault();triggerFileInput(e)}}
                                                        >
                                                            <i className="fs-1 text-secondary bi bi-music-note-beamed"></i>
                                                        </Button>
                                                    </div>
                                                    <div className='py-2 h-100 d-flex align-items-center'>
                                                        <Form.Control type='file' accept="image/*"
                                                            placeholder="Choose Image"
                                                            aria-label="fullname"
                                                            aria-describedby="basic-addon1"
                                                            className='d-none'
                                                            name='IMAGE'
                                                            onChange={handleFormChangeMedia}
                                                        />
                                                        <Button variant='light' 
                                                            style={{aspectRatio:"4/2",width:"auto", height:"16vh"}}
                                                            onClick={(e) => {e.preventDefault();triggerFileInput(e)}}
                                                        >
                                                            <i className="fs-1 text-secondary bi bi-image"></i>
                                                        </Button>
                                                    </div>
                                                    <div className='py-2 h-100 d-flex align-items-center'>
                                                        <Button variant='light' 
                                                            style={{aspectRatio:"4/2",width:"auto", height:"16vh"}}
                                                            onClick={handleShowUrlModal}
                                                        >
                                                            <i className="fs-1 text-secondary bi bi-youtube"></i>
                                                        </Button>
                                                    </div>
                                                </div>
                                            )
                                        )
                                    )}
                                </Col>
                            </Row>

                            {formData.QUESTION_TYPE=== "TFQ"?(
                                <Row>
                                    <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                        <Form.Label>Answer Key<sup className='text-red fw-bold'>*</sup></Form.Label>
                                        <InputGroup className="mb-2 input-group-icon">
                                            <InputGroup.Text id="basic-addon1"><i className="bi bi-key"></i></InputGroup.Text>
                                            <Form.Select 
                                                required 
                                                name='IS_TRUE'
                                                defaultValue={`${selectedQuestion ? formData.trueFalse[0].IS_TRUE : ""}`}
                                                onChange={handleFormChangeAnswer} 
                                            >
                                                <option value="" disabled hidden>Choose Answer Key</option>
                                                <option value="0">false</option>
                                                <option value="1">true</option>
                                            </Form.Select>
                                        </InputGroup>
                                    </Form.Group>
                                    <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                        <Form.Label>Weight<sup className='text-red fw-bold'>*</sup></Form.Label>
                                        <InputGroup className="mb-2 input-group-icon">
                                            <InputGroup.Text><i className="bi bi-lightbulb"></i></InputGroup.Text>
                                            <Form.Control type='number' onWheel={() => document.activeElement.blur()} placeholder="Enter Weight"
                                                required
                                                min={0}
                                                name='SCORE_WEIGHT'
                                                defaultValue={formData.SCORE_WEIGHT || ''}
                                                onChange={handleFormChange}
                                            />
                                        </InputGroup>
                                    </Form.Group>
                                </Row>
                            ):(
                                formData.QUESTION_TYPE=== "MCQ"?(
                                    <Row>
                                        <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                            <Form.Label>Option A<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
                                                <Form.Control placeholder="Enter Option A"
                                                    required
                                                    name='OPTION_A'
                                                    defaultValue={formData.multipleChoices[0]?.OPTION_A ? formData.multipleChoices[0].OPTION_A || '' : ''}
                                                    onChange={handleFormChangeAnswer}
                                                />
                                            </InputGroup>
                                        </Form.Group>
                                        <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                            <Form.Label>Option B<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
                                                <Form.Control placeholder="Enter Option B"
                                                    required
                                                    name='OPTION_B'
                                                    defaultValue={formData.multipleChoices[0]?.OPTION_B ? formData.multipleChoices[0].OPTION_B || '' : ''}
                                                    onChange={handleFormChangeAnswer}
                                                />
                                            </InputGroup>
                                        </Form.Group>
                                        <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                            <Form.Label>Option C<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
                                                <Form.Control placeholder="Enter Option C"
                                                    required
                                                    name='OPTION_C'
                                                    defaultValue={formData.multipleChoices[0]?.OPTION_C ? formData.multipleChoices[0].OPTION_C || '' : ''}
                                                    onChange={handleFormChangeAnswer}
                                                />
                                            </InputGroup>
                                        </Form.Group>
                                        <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                            <Form.Label>Option D<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
                                                <Form.Control placeholder="Enter Option D"
                                                    required
                                                    name='OPTION_D'
                                                    defaultValue={formData.multipleChoices[0]?.OPTION_D ? formData.multipleChoices[0].OPTION_D || '' : ''}
                                                    onChange={handleFormChangeAnswer}
                                                />
                                            </InputGroup>
                                        </Form.Group>
                                        <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                            <Form.Label>Option E (Optional)</Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
                                                <Form.Control placeholder="Enter Option E"
                                                    name='OPTION_E'
                                                    defaultValue={formData.multipleChoices[0]?.OPTION_E ? formData.multipleChoices[0].OPTION_E || '' : ''}
                                                    onChange={handleFormChangeAnswer}
                                                />
                                            </InputGroup>
                                        </Form.Group>
                                        <Col className='col-6 d-none d-sm-block d-lg-none'></Col>
                                        <Form.Group as={Col} className='mb-2 col-6 col-lg-3'>
                                            <Form.Label>Answer Key<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text id="basic-addon1"><i className="bi bi-key"></i></InputGroup.Text>
                                                <Form.Select 
                                                    required
                                                    name='ANSWER_KEY'
                                                    defaultValue={formData.multipleChoices[0]?.ANSWER_KEY ? formData.multipleChoices[0].ANSWER_KEY || "" : ""}
                                                    onChange={handleFormChangeAnswer}
                                                >
                                                    <option value="" disabled hidden>Choose Answer Key</option>
                                                    <option value="A" 
                                                        hidden={formData.multipleChoices[0]?.OPTION_A ? false : true}
                                                    >
                                                        A
                                                    </option>
                                                    <option value="B"
                                                        hidden={formData.multipleChoices[0]?.OPTION_B ? false : true}
                                                    >
                                                        B
                                                    </option>
                                                    <option value="C"
                                                        hidden={formData.multipleChoices[0]?.OPTION_C ? false : true}
                                                    >
                                                        C
                                                    </option>
                                                    <option value="D"
                                                        hidden={formData.multipleChoices[0]?.OPTION_D ? false : true}
                                                    >
                                                        D
                                                    </option>
                                                    <option value="E"
                                                        hidden={formData.multipleChoices[0]?.OPTION_E ? false : true}
                                                    >
                                                        E
                                                    </option>
                                                    <option value="abced"
                                                        disabled
                                                        hidden={formData.multipleChoices[0] ? true : false}
                                                    >
                                                        Fill Option First
                                                    </option>
                                                </Form.Select>
                                            </InputGroup>
                                        </Form.Group>
                                        <Form.Group as={Col} className='mb-2 col-6 col-lg-3'>
                                            <Form.Label>Weight<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <InputGroup className="mb-2 input-group-icon">
                                                <InputGroup.Text><i className="bi bi-lightbulb"></i></InputGroup.Text>
                                                <Form.Control type='number' onWheel={() => document.activeElement.blur()} placeholder="Enter Weight"
                                                    required
                                                    min={0}
                                                    name='SCORE_WEIGHT'
                                                    defaultValue={formData.SCORE_WEIGHT || ''}
                                                    onChange={handleFormChange}
                                                />
                                            </InputGroup>
                                        </Form.Group>
                                    </Row>
                                ):(
                                    formData.QUESTION_TYPE=== "MPQ"?(
                                        <Row>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                <Form.Label>Left Pair<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[0]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Left Pair 1"
                                                        name='0_LEFT_PAIR'
                                                        defaultValue={formData.matchingPairs[0]?.LEFT_PAIR ? formData.matchingPairs[0].LEFT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                <Form.Label>Right Pair<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[0]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Right Pair 1"
                                                        name='0_RIGHT_PAIR'
                                                        defaultValue={formData.matchingPairs[0]?.RIGHT_PAIR ? formData.matchingPairs[0].RIGHT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[1]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Left Pair 2"
                                                        name='1_LEFT_PAIR'
                                                        defaultValue={formData.matchingPairs[1]?.LEFT_PAIR ? formData.matchingPairs[1].LEFT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[1]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Right Pair 2"
                                                        name='1_RIGHT_PAIR'
                                                        defaultValue={formData.matchingPairs[1]?.RIGHT_PAIR ? formData.matchingPairs[1].RIGHT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[2]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Left Pair 3"
                                                        name='2_LEFT_PAIR'
                                                        defaultValue={formData.matchingPairs[2]?.LEFT_PAIR ? formData.matchingPairs[2].LEFT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[2]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Right Pair 3"
                                                        name='2_RIGHT_PAIR'
                                                        defaultValue={formData.matchingPairs[2]?.RIGHT_PAIR ? formData.matchingPairs[2].RIGHT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[3]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Left Pair 4"
                                                        name='3_LEFT_PAIR'
                                                        defaultValue={formData.matchingPairs[3]?.LEFT_PAIR ? formData.matchingPairs[3].LEFT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[3]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Right Pair 4"
                                                        name='3_RIGHT_PAIR'
                                                        defaultValue={formData.matchingPairs[3]?.RIGHT_PAIR ? formData.matchingPairs[3].RIGHT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[4]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Left Pair 5"
                                                        name='4_LEFT_PAIR'
                                                        defaultValue={formData.matchingPairs[4]?.LEFT_PAIR ? formData.matchingPairs[4].LEFT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text style={{backgroundColor: mpColors[4]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
                                                    <Form.Control
                                                        placeholder="Enter Right Pair 5"
                                                        name='4_RIGHT_PAIR'
                                                        defaultValue={formData.matchingPairs[4]?.RIGHT_PAIR ? formData.matchingPairs[4].RIGHT_PAIR || '' : ''}
                                                        onChange={handleFormChangeAnswer}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                            
                                            <Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
                                                <Form.Label>Weight<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                <InputGroup className="mb-2 input-group-icon">
                                                    <InputGroup.Text><i className="bi bi-lightbulb"></i></InputGroup.Text>
                                                    <Form.Control type='number' onWheel={() => document.activeElement.blur()}
                                                        required
                                                        min={0}
                                                        placeholder="Enter Weight"
                                                        name='SCORE_WEIGHT'
                                                        value={formData.SCORE_WEIGHT || ''}
                                                        onChange={handleFormChange}
                                                    />
                                                </InputGroup>
                                            </Form.Group>
                                        </Row>
                                    ):(
                                        <>
                                            <Form.Label>Answer Key<sup className='text-red fw-bold'>*</sup></Form.Label>
                                            <h3 className='text-center my-3'>Select Question Type</h3>
                                        </>
                                    )
                                )
                            )}
                            {/* <div className="py-4 bg-white d-flex justify-content-end">
                                <Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
                                    Update
                                </Button>
                            </div> */}
                        </Form>
                </Modal.Body>
            </Modal>  

            <Modal show={showUrlModal} className='modal-admin' onHide={handleCloseUrlModal} centered style={{backgroundColor:"#00000099"}}>
                <Modal.Header closeButton>
                    Video URL
                </Modal.Header>
                <Modal.Body>
                    <InputGroup>
                        <Form.Control
                            placeholder="Enter Video Url"
                            name='VIDEO'
                            onChange={handleUrlInput}
                        />
                        {validUrl === "valid"?(
                            <Button variant="outline-success" className={`${validUrl === "valid" ? "d-block":"d-none"}`} onClick={handleSetVideoUrl}>
                                Save
                            </Button>
                        ):(
                            <Button variant="outline-secondary" className={`${validUrl === "valid" ? "d-none":"d-block"}`} onClick={handleCheckUrl}>
                                Check
                            </Button>
                        )}
                    </InputGroup>
                    <small className={`ms-1 ${validUrl === "invalid" ? "text-red" : validUrl === "valid" ? "text-success" : ""}`}>
                        {validUrl === "invalid" ? "This URL is invalid." : validUrl === "valid" ? "This URL is valid" : "The URL will be checked for validity before use."}
                    </small>
                </Modal.Body>
            </Modal>

            <ModalOperation
                show={showLoader}
                handleClose={handleCloseLoader}
                title={loaderState.title}
                description={loaderState.description}
                loading={loaderState.loading}
                successMessage={loaderState.successMessage}
                confirmAction={loaderState.confirmAction}
                handleConfirm={loaderState.handleConfirm}
            />
        </div>
    );
};

export default UpdateExercises;