import { useParams } from 'react-router-dom'
import { useReview } from '../hooks/useReview'
import {
	Container,
	Row,
	Col,
	ListGroup,
	Button,
	OverlayTrigger,
	Popover,
} from 'react-bootstrap'
import MultipleChoiceQuestion from './components/MultipleChoiceQuestion'
import TrueFalseQuestion from './components/TrueFalseQuestion'
import MatchingPairsQuestion from './components/MatchingPairsQuestion'
import Skeleton from 'react-loading-skeleton'

const Review = () => {
	const { stdLearning } = useParams()
	const {
		questions,
		currentQuestion,
		currentQuestionIndex,
		setCurrentQuestionIndex,
		answers,
		isLoading,
		error,
		nextQuestion,
		prevQuestion,
	} = useReview(stdLearning)

	const renderQuestion = () => {
		switch (currentQuestion.QUESTION_TYPE) {
			case 'MCQ':
				return (
					<MultipleChoiceQuestion
						question={currentQuestion}
						studentAnswer={currentQuestion.ANSWER_STUDENT}
						index={currentQuestionIndex}
					/>
				)
			case 'TFQ':
				return (
					<TrueFalseQuestion
						question={currentQuestion}
						studentAnswer={currentQuestion.ANSWER_STUDENT}
						index={currentQuestionIndex}
					/>
				)
			case 'MPQ':
				return (
					<MatchingPairsQuestion
						question={currentQuestion}
						studentAnswer={currentQuestion.ANSWER_STUDENT}
						index={currentQuestionIndex}
					/>
				)
			default:
				return <p>Unknown question type.</p>
		}
	}

	const popover = (
		<Popover id="popover-basic">
			<Popover.Header as="h4">Tips</Popover.Header>
			<Popover.Body className="p-2">
				<ul className="ps-3 m-0">
					<li>
						Click the <strong>left arrow</strong> key to go to the previous
						question
					</li>
					<li>
						Click the <strong>right arrow</strong> key to go to the next
						question
					</li>
				</ul>
			</Popover.Body>
		</Popover>
	)

	if (isLoading) {
		return (
			<div className="row">
				<div className="col-2">
					<Skeleton
						containerClassName="w-100"
						className="w-100 mb-1 rounded-3"
						count={6}
						style={{ height: '4vh' }}
					/>
				</div>
				<div className="col-10">
					<Skeleton
						containerClassName="w-100"
						className="w-100 mb-1 rounded-3"
						style={{ height: '5vh' }}
					/>
					<Skeleton
						containerClassName="w-100"
						className="w-50 mb-1 rounded-3"
						style={{ height: '20vh' }}
					/>
					<Skeleton
						containerClassName="w-100"
						className="w-100 mb-1 rounded-3"
						style={{ height: '30vh' }}
					/>
				</div>
			</div>
		)
	}

	if (error)
		return <h1 className="text-center">Exercise questions not yet available</h1>

	return (
		<Container fluid className="exercise-page">
			<Row>
				<Col sm={2}>
					<div className="p-3 rounded-4 bg-white">
						<div className="mb-3 d-flex justify-content-between align-items-center">
							<h4 className="mb-0 text-gd fw-bold">Review</h4>
							<OverlayTrigger
								trigger="click"
								placement="right"
								overlay={popover}
							>
								<i className=" bi bi-info-circle cursor-pointer text-secondary"></i>
							</OverlayTrigger>
						</div>
						<ListGroup variant="flush" className="review-list">
							{questions.map((q, index) => (
								<ListGroup.Item
									key={q.ID_ADMIN_EXERCISE}
									active={index === currentQuestionIndex}
									onClick={() => setCurrentQuestionIndex(index)}
									className={`border-0 rounded-3 number-label fw-bold ${
										q.IS_CORRECT === 1 ? 'correct' : 'incorrect'
									}`}
									style={{ cursor: 'pointer' }}
								>
									<i
										className={`me-2 bi bi-circle ${
											answers[index] !== null ? 'd-none' : 'd-block'
										}`}
									></i>
									<i
										className={`me-2 bi bi-check2-circle ${
											answers[index] !== null ? 'd-block' : 'd-none'
										}`}
									></i>
									{index + 1}
								</ListGroup.Item>
							))}
						</ListGroup>
					</div>
				</Col>

				<Col sm={10}>
					<div className="p-4 rounded-4 bg-white">
						<div className="pb-4 d-flex justify-content-between align-items-center">
							<Button
								variant="outline-blue"
								className={`rounded-35 ${
									currentQuestionIndex === 0 ? 'invisible' : 'visible'
								}`}
								onClick={prevQuestion}
								disabled={currentQuestionIndex === 0}
							>
								<i className="bi bi-arrow-left"></i>
							</Button>
							<h5 className="m-0">{`Questions ${currentQuestionIndex + 1} of ${
								questions.length
							}`}</h5>
							<Button
								variant="blue"
								className={`rounded-35 ${
									currentQuestionIndex === questions.length - 1 ? 'd-none' : ''
								}`}
								onClick={nextQuestion}
								disabled={currentQuestionIndex === questions.length - 1}
							>
								Next Questions <i className="bi bi-arrow-right"></i>
							</Button>
						</div>
						<div className="p-3 border rounded-3">{renderQuestion()}</div>
					</div>
				</Col>
			</Row>
		</Container>
	)
}

export default Review
