import { Container, Row, Col, Button, Breadcrumb } from 'react-bootstrap'
import { Link, useParams } from 'react-router-dom'
import check from '../../../../assets/images/illustration/checkIcon.png'
// import { useValidation } from '../../utils/ValidationContext';
import useLevels from '../hooks/useLevels'
import { unSlugify } from '../../../../utils/Constant'

import Skeleton from 'react-loading-skeleton'

const Level = () => {
	const { section, topic } = useParams()

	const { levels, loading, error, isLevelUnlocked, levelDesc } = useLevels(
		section,
		topic
	)

	if (loading) {
		return (
			<div className="row">
				<Skeleton
					containerClassName="w-100"
					className="w-100 mb-3 rounded-3"
					style={{ height: '3vh' }}
				/>
				<Skeleton
					containerClassName="w-100"
					className="w-100 mb-3 rounded-4"
					style={{ height: '25vh' }}
				/>
				<Skeleton
					containerClassName="w-100 d-flex flex-wrap justify-content-between"
					className="mb-3 rounded-4"
					count={4}
					inline={true}
					style={{ width: '49%', height: '25vh' }}
				/>
			</div>
		)
	}

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

	return (
		<Container className="level-page">
			<Row>
				<Col className="d-flex align-items-center mb-3 breadcrumb-con">
					<Button
						as={Link}
						variant="blue"
						className="btn-square-back"
						to={`/learning/module/${section}`}
					>
						<i className="bi bi-arrow-90deg-left"></i>
					</Button>
					<Breadcrumb className="custom-breadcrumb">
						<Breadcrumb.Item href="/learning/module">
							<i className="bi bi-book me-1"></i>Learning
						</Breadcrumb.Item>
						<Breadcrumb.Item
							href={`/learning/module/${section}`}
							className="text-capitalize"
						>
							{unSlugify(section)}
						</Breadcrumb.Item>
						<Breadcrumb.Item active>{unSlugify(topic)}</Breadcrumb.Item>
					</Breadcrumb>
				</Col>
			</Row>

			{levels.length === 0 ? (
				<h1>Materi Belum Tersedia</h1>
			) : (
				<Row>
					{levels.map((level, index) => (
						<Col
							key={level.ID_LEVEL}
							xs={12}
							grant={level.ID_LEVEL}
							sm={level.IS_PRETEST === 1 ? 12 : 6}
							className="mb-3"
						>
							<div
								className={`p-3 level-con ${
									isLevelUnlocked(index) ? 'bg-gd' : 'bg-light-grey'
								} rounded-4`}
							>
								{!isLevelUnlocked(index) && level.SCORE > 40 && (
									<img src={check} alt="" className="check-icon" />
								)}
								<div className="mb-3 w-100 d-flex justify-content-between">
									{level.IS_PRETEST === 0 ? (
										<div className="level-label">
											<h4 className="m-0 lh-normal">LEVEL</h4>
											<span>{index}</span>
										</div>
									) : (
										<div className="level-label">
											<h4 className="m-0 lh-normal">PRETEST</h4>
										</div>
									)}
									<h5 className="m-0 text-white">
										Score {level.SCORE === null ? 0 : level.SCORE}/100
									</h5>
								</div>
								<p className="mb-3 text-white">{levelDesc[index]}</p>

								{level.IS_PRETEST === 1 && level.SCORE !== null ? (
									<Button
										variant="success"
										className="py-2 px-5 w-fit rounded-35"
										as={Link}
										to={`/learning/review/${level.ID_STUDENT_LEARNING}`}
									>
										Review
									</Button>
								) : !isLevelUnlocked(index) ? (
									<div className="py-2 px-5 mt-auto w-fit bg-light rounded-35">
										Not Allowed
									</div>
								) : (
									// level.SCORE < 65 ?(
									//     <Button variant='warning' className='py-2 px-5 w-fit rounded-35'
									//         as={Link} to={level.IS_PRETEST === 1 ? `/learning/module/${section}/${topic}/pretest/material` : `/learning/module/${section}/${topic}/level-${index}/material`}
									//     >
									//         Learn Now
									//     </Button>
									// ) : (
									//     <div className='py-2 px-5 bg-warning w-fit rounded-35'>
									//         Finished
									//     </div>
									// )
									<Button
										variant="warning"
										className="py-2 px-5 w-fit rounded-35"
										as={Link}
										to={
											level.IS_PRETEST === 1
												? `/learning/module/${section}/${topic}/pretest/material`
												: `/learning/module/${section}/${topic}/level-${index}/material`
										}
									>
										Learn Now
									</Button>
								)}
							</div>
						</Col>
					))}
				</Row>
			)}
		</Container>
	)
}

export default Level
