import React, { useState } from 'react';
import { Table, Row, Col, Nav, NavDropdown, Tab, Button, Form, InputGroup, Dropdown, DropdownButton, Accordion, Modal } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';

const OldManageExercises = () => {
    const [show, setShow] = useState(false);
    const [viewData, setView] = useState(true);
    const [dropDownTitle, setDropdownTitle] = useState('Create Data');

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const toggleViewData = () => setView(true);
    const toggleCreateData = () => setView(false);

    return (
        <div className='admin-teachers'>
            <h2 className='page-title strip'>Exercises</h2>
            <p className='page-desc'>Description of Exercises.</p>
            <Tab.Container id="left-tabs-example" defaultActiveKey="detail">
                <Row className='mb-45'>
                    <Col xs={12}>
                        <div className='w-100 col-tabs-parent'>
                            <Nav variant="pills" className={`col-tabs ${viewData ? `border-0` : `border-bottom`}`}>
                                <Nav.Item>
                                    <Nav.Link eventKey="detail" onClick={toggleViewData}>View Entries</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="create" onClick={toggleCreateData}>Create Data</Nav.Link>
                                </Nav.Item>
                                <NavDropdown title={dropDownTitle} id="nav-dropdown" className={`ms-2 ${!viewData ? `active` : ``}`}>
                                    <NavDropdown.Item eventKey="create-multiple" onClick={() => { toggleCreateData(); setDropdownTitle('Multiple Choice'); }}>
                                        Create Multiple Choice
                                    </NavDropdown.Item>
                                    <NavDropdown.Item eventKey="create-truefalse" onClick={() => { toggleCreateData(); setDropdownTitle('True / False'); }}>
                                        Create True False
                                    </NavDropdown.Item>
                                    <NavDropdown.Item eventKey="create-matching" onClick={() => { toggleCreateData(); setDropdownTitle('Matching Pairs'); }}>
                                        Create Matching Pairs
                                    </NavDropdown.Item>
                                </NavDropdown>
                            </Nav>
                            <Form className={`form-selector ${viewData ? `d-none` : `d-block`}`}>
                                <Row> 
                                    <Form.Group as={Col} controlId="formGridEmail">
                                        <Form.Label>Section<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-book"></i></InputGroup.Text>
                                            <Form.Select aria-label="teacher select" defaultValue="" required>
                                                <option value="" disabled hidden>Choose Section</option>
                                                <option value="1">Grammar</option>
                                                <option value="2">Listening</option>
                                                <option value="3">Reading</option>
                                                <option value="4">Vocabulary</option>
                                            </Form.Select>
                                        </InputGroup>
                                    </Form.Group>
                                    <Form.Group as={Col} controlId="formGridEmail">
                                        <Form.Label>Topic<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-card-list"></i></InputGroup.Text>
                                            <Form.Select aria-label="teacher select" defaultValue="" required>
                                                <option value="" disabled hidden>Choose Topic</option>
                                                <option value="1">Talking about Self</option>
                                                <option value="2">Congratulating & Complimenting Others</option>
                                                <option value="3">Talking About Intentions</option>
                                                <option value="4">Presenting Information</option>
                                                <option value="5">Describing a Place</option>
                                            </Form.Select>
                                        </InputGroup>
                                    </Form.Group>
                                    <Form.Group as={Col} controlId="formGridEmail">
                                        <Form.Label>Level<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-bar-chart"></i></InputGroup.Text>
                                            <Form.Select aria-label="teacher select" defaultValue="" required>
                                                <option value="" disabled hidden>Choose Level</option>
                                                <option value="0">Pretest</option>
                                                <option value="1">Level 1</option>
                                                <option value="2">Level 2</option>
                                                <option value="3">Level 3</option>
                                                <option value="4">Level 4</option>
                                                <option value="5">Level 5</option>
                                                <option value="6">Level 6</option>
                                            </Form.Select>
                                        </InputGroup>
                                    </Form.Group>
                                </Row>
                            </Form>
                        </div>
                    </Col>
                </Row>
                <Row className='mb-45'>
                    <Col xs={12} className='col-tabs-content'>
                        <Tab.Content>
                            <Tab.Pane eventKey="detail">
                                <div className="cards">
                                    <div className="cards-title">
                                        <h4>Exercise List</h4>
                                    </div>
                                    <div className="cards-body">
                                        <div className="d-flex">
                                            <Form.Control
                                                aria-label="Large"
                                                aria-describedby="inputGroup-sizing-sm"
                                                placeholder='Search'
                                                className='table-input-search'
                                            />
                                            <DropdownButton title="Sort by" variant='ts'>
                                                <Dropdown.Item href="#/action-1">Section</Dropdown.Item>
                                                <Dropdown.Item href="#/action-2">Topic</Dropdown.Item>
                                                <Dropdown.Item href="#/action-3">Level</Dropdown.Item>
                                            </DropdownButton>
                                        </div>
                                        <Table hover>
                                            <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Section</th>
                                                <th>Topic</th>
                                                <th className='text-center'>Level</th>
                                                <th className='text-center'>Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>Pretest</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>1</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>2</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>3</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>5</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>4</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>6</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>5</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>7</td>
                                                <td>Listening</td>
                                                <td>Talking about Self</td>
                                                <td className='text-center'>6</td>
                                                <td className='text-center action-col'>
                                                    <NavLink className='btn btn-sm btn-view' to='exercise-detail'><i className="bi bi-eye"></i></NavLink>
                                                    <Button size='sm' className='btn-edit' onClick={handleShow}><i className="bi bi-pencil-square"></i></Button>
                                                    <Button size='sm' className='btn-delete'><i className="bi bi-trash3"></i></Button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </Table>
                                    </div>
                                </div>
                            </Tab.Pane>
                            <Tab.Pane eventKey="create-multiple">

                                <Accordion defaultActiveKey="0" alwaysOpen className='cards mb-45'>
                                    <Accordion.Item eventKey="0">
                                        <Accordion.Header className='cards-title'>Question 1</Accordion.Header>
                                        <Accordion.Body className='cards-body'>
                                            <Form>
                                                <Row className="mb-2">
                                                    <Form.Group as={Col} controlId="formGridEmail">
                                                        <Form.Label>Question<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                        <Form.Control as="textarea" rows={3} className='mb-2' placeholder='Type the Question here...' />
                                                    </Form.Group>
                                                </Row>
                                                <Row className='mb-2'>
                                                    <Form.Group as={Col} controlId="formGridPassword">
                                                        <Form.Label>Audio File (optional)</Form.Label>
                                                        <InputGroup className="mb-2 input-group-icon">
                                                            <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-music-note-beamed"></i></InputGroup.Text>
                                                            <Form.Control
                                                                placeholder="Choose Audio"
                                                                aria-label="fullname"
                                                                aria-describedby="basic-addon1"
                                                                className='border-dashed'
                                                            />
                                                        </InputGroup>
                                                        <small>Ensure the file size is no larger than 5 MB</small>
                                                    </Form.Group>
                                                    <Form.Group as={Col} controlId="formGridPassword">
                                                        <Form.Label>Image File (optional)</Form.Label>
                                                        <InputGroup className="mb-2 input-group-icon">
                                                            <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-image"></i></InputGroup.Text>
                                                            <Form.Control
                                                                placeholder="Choose Image"
                                                                aria-label="fullname"
                                                                aria-describedby="basic-addon1"
                                                                className='border-dashed'
                                                            />
                                                        </InputGroup>
                                                        <small>Ensure the file size is no larger than 5 MB</small>
                                                    </Form.Group>
                                                    <Form.Group as={Col} controlId="formGridPassword">
                                                        <Form.Label>URL Video (optional)</Form.Label>
                                                        <InputGroup className="mb-2 input-group-icon">
                                                            <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-film"></i></InputGroup.Text>
                                                            <Form.Control
                                                                placeholder="Choose Video"
                                                                aria-label="fullname"
                                                                aria-describedby="basic-addon1"
                                                                className='border-dashed'
                                                            />
                                                        </InputGroup>
                                                    </Form.Group>
                                                </Row>
                                                <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"
                                                            />
                                                        </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"
                                                            />
                                                        </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"
                                                            />
                                                        </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"
                                                            />
                                                        </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"
                                                            />
                                                        </InputGroup>
                                                    </Form.Group>
                                                    <Form.Group as={Col} className='mb-2 col-6 col-sm-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 aria-label="teacher select" defaultValue="" required>
                                                                <option value="" disabled hidden>Choose Answer Key</option>
                                                                <option value="0">A</option>
                                                                <option value="1">B</option>
                                                                <option value="2">C</option>
                                                                <option value="3">D</option>
                                                                <option value="4">E</option>
                                                            </Form.Select>
                                                        </InputGroup>
                                                    </Form.Group>
                                                    <Form.Group as={Col} className='mb-2 col-6 col-sm-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
                                                                placeholder="Enter Weight"
                                                            />
                                                        </InputGroup>
                                                    </Form.Group>
                                                </Row>
                                                <div className="d-flex justify-content-end">
                                                    <Button variant="outline-blue" type="reset" className='ms-auto py-2 rounded-35'>
                                                        reset
                                                    </Button>
                                                    <Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
                                                        Add
                                                    </Button>
                                                </div>
                                            </Form>
                                        </Accordion.Body>
                                    </Accordion.Item>
                                </Accordion>

                            </Tab.Pane>
                            <Tab.Pane eventKey="create-truefalse">

                                <Accordion defaultActiveKey="0" alwaysOpen className='cards mb-45'>
                                    <Accordion.Item eventKey="0">
                                        <Accordion.Header className='cards-title'>Question 1</Accordion.Header>
                                        <Accordion.Body className='cards-body'>
                                            <Form>
                                                <Row className="mb-2">
                                                    <Form.Group as={Col} controlId="formGridEmail">
                                                        <Form.Label>Question<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                        <Form.Control as="textarea" rows={3} className='mb-2' placeholder='Type the Question here...' />
                                                    </Form.Group>
                                                </Row>
                                                <Row className='mb-2'>
                                                    <Form.Group as={Col} controlId="formGridPassword">
                                                        <Form.Label>Audio File (optional)</Form.Label>
                                                        <InputGroup className="mb-2 input-group-icon">
                                                            <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-music-note-beamed"></i></InputGroup.Text>
                                                            <Form.Control
                                                                placeholder="Choose Audio"
                                                                aria-label="fullname"
                                                                aria-describedby="basic-addon1"
                                                                className='border-dashed'
                                                            />
                                                        </InputGroup>
                                                        <small>Ensure the file size is no larger than 5 MB</small>
                                                    </Form.Group>
                                                    <Form.Group as={Col} controlId="formGridPassword">
                                                        <Form.Label>Image File (optional)</Form.Label>
                                                        <InputGroup className="mb-2 input-group-icon">
                                                            <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-image"></i></InputGroup.Text>
                                                            <Form.Control
                                                                placeholder="Choose Image"
                                                                aria-label="fullname"
                                                                aria-describedby="basic-addon1"
                                                                className='border-dashed'
                                                            />
                                                        </InputGroup>
                                                        <small>Ensure the file size is no larger than 5 MB</small>
                                                    </Form.Group>
                                                    <Form.Group as={Col} controlId="formGridPassword">
                                                        <Form.Label>URL Video (optional)</Form.Label>
                                                        <InputGroup className="mb-2 input-group-icon">
                                                            <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-film"></i></InputGroup.Text>
                                                            <Form.Control
                                                                placeholder="Choose Video"
                                                                aria-label="fullname"
                                                                aria-describedby="basic-addon1"
                                                                className='border-dashed'
                                                            />
                                                        </InputGroup>
                                                    </Form.Group>
                                                </Row>
                                                <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 aria-label="teacher select" defaultValue="" required>
                                                                <option value="" disabled hidden>Choose Answer Key</option>
                                                                <option value="0">true</option>
                                                                <option value="1">false</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
                                                                placeholder="Enter Weight"
                                                            />
                                                        </InputGroup>
                                                    </Form.Group>
                                                </Row>
                                                <div className="d-flex justify-content-end">
                                                    <Button variant="outline-blue" type="reset" className='ms-auto py-2 rounded-35'>
                                                        reset
                                                    </Button>
                                                    <Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
                                                        Add
                                                    </Button>
                                                </div>
                                            </Form>
                                        </Accordion.Body>
                                    </Accordion.Item>
                                </Accordion>

                            </Tab.Pane>
                        </Tab.Content>
                    </Col>
                </Row>
            </Tab.Container>

            <Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
                <Modal.Header closeButton>
                    <Modal.Title>Update Teacher Data</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Row className="mb-2">
                            <Form.Group as={Col} controlId="formGridEmail">
                                <Form.Label>Section Name<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-book"></i></InputGroup.Text>
                                    <Form.Control
                                        placeholder="Enter Section Name"
                                        aria-label="NIP"
                                        aria-describedby="basic-addon1"
                                    />
                                </InputGroup>
                            </Form.Group>
                            <Form.Group as={Col} controlId="formGridPassword">
                                <Form.Label>Thumbnail<sup className='text-red fw-bold'>*</sup></Form.Label>
                                <InputGroup className="mb-2 input-group-icon">
                                    <InputGroup.Text id="basic-addon1" className='border-dashed'><i className="bi bi-cloud-arrow-up"></i></InputGroup.Text>
                                    <Form.Control
                                        placeholder="Choose Image"
                                        aria-label="fullname"
                                        aria-describedby="basic-addon1"
                                        className='border-dashed'
                                    />
                                </InputGroup>
                                <small>Ensure the file size is no larger than 5 MB</small>
                            </Form.Group>
                        </Row>
                        <Row className="mb-2">
                            <Form.Group as={Col} controlId="formGridEmail">
                                <Form.Label>Section Description<sup className='text-red fw-bold'>*</sup></Form.Label>
                                <Form.Control as="textarea" rows={3} placeholder='Type the section description here...' />
                            </Form.Group>
                        </Row>
                        <div className="d-flex justify-content-end">
                            <Button variant="blue" type="submit" className='py-2 px-5 w-100 rounded-35'>
                                Update
                            </Button>
                        </div>
                    </Form>
                </Modal.Body>
            </Modal>
        </div>
    );
};

export default OldManageExercises;
