/* eslint-disable no-mixed-spaces-and-tabs */
import {
	Container,
	Row,
	Col,
	Card,
	Button,
	Dropdown,
	Breadcrumb,
	Tab,
	Nav,
} from 'react-bootstrap'
import useHistories from '../hooks/useHirtories'
import { Link } from 'react-router-dom'
import newBie from '../../../../assets/images/illustration/emptyJourney.png'
import Skeleton from 'react-loading-skeleton'

const ExerciseHistory = () => {
	const {
		historyData,
		sectionData,
		loading,
		error,
		activeTab,
		topicsBySection,
		selectedTopic,
		setActiveTab,
		formatLocalDate,
		compareLevels,
		setSelectedTopic,
	} = useHistories()

	if (error) return <p>{error}</p>

	const topics = activeTab !== 'all' ? topicsBySection[activeTab] || [] : []

	return (
		<div className="exercise-history">
			<h3 className="fw-bold text-blue">Your Exercise History!</h3>
			<p className="text-secondary mb-4">
				Track your progress with a personalized overview of all your workouts.
			</p>
			<Container
				fluid
				className="mb-4 d-flex align-items-center bg-white rounded rounded-4"
			>
				<Tab.Container
					id="left-tabs-example"
					defaultActiveKey="all"
					onSelect={k => {
						setActiveTab(k)
						setSelectedTopic('')
					}}
				>
					<Row>
						<Col>
							<Nav variant="pills" className="p-2 bg-white">
								<Nav.Item>
									<Nav.Link eventKey="all">All</Nav.Link>
								</Nav.Item>
								{sectionData.map((section, index) => (
									<Nav.Item key={index}>
										<Nav.Link eventKey={section}>{section}</Nav.Link>
									</Nav.Item>
								))}
							</Nav>
						</Col>
					</Row>
				</Tab.Container>
				{topics.length > 0 && (
					<Dropdown
						className="ms-auto"
						onSelect={topicId => setSelectedTopic(topicId)}
					>
						<Dropdown.Toggle
							id="dropdown-basic"
							size="sm"
							variant="outline-blue rounded-3"
							style={{ padding: '6px 16px' }}
						>
							{selectedTopic
								? topics.find(t => t.ID_TOPIC === selectedTopic)?.NAME_TOPIC
								: 'Select a Topic'}
						</Dropdown.Toggle>
						<Dropdown.Menu>
							{topics.map((topic, index) => (
								<Dropdown.Item
									key={topic.ID_TOPIC ? topic.ID_TOPIC : index}
									eventKey={topic.ID_TOPIC ? topic.ID_TOPIC : index}
								>
									{topic.NAME_TOPIC}
								</Dropdown.Item>
							))}
						</Dropdown.Menu>
					</Dropdown>
				)}
			</Container>
			<Container fluid className="bg-white rounded rounded-4 p-4">
				<Row xs={1}>
					{loading ? (
						<Col>
							<Card className="flex-column p-3 border rounded-4">
								<div className="w-100 d-flex justify-content-between">
									<Skeleton
										containerClassName="mb-2"
										className="mb-1 rounded-4"
										style={{ width: '15vw', height: '2vw' }}
									/>
									<Skeleton
										containerClassName="mb-2"
										className="mb-1 rounded-4"
										style={{ width: '25vw', height: '2vw' }}
									/>
								</div>
								<Skeleton
									containerClassName="mb-2"
									className="mb-1 rounded-4"
									style={{ width: '40vw', height: '2vw' }}
								/>
								<div className="w-100 d-flex justify-content-between">
									<div className="d-flex">
										<Skeleton
											containerClassName="mb-2"
											className="mb-1 me-2 rounded-4"
											style={{ width: '4vw', height: '5vw' }}
										/>
										<Skeleton
											containerClassName="mb-2"
											className="mb-1 rounded-4"
											style={{ width: '15vw', height: '5vw' }}
										/>
									</div>
									<Skeleton
										containerClassName="mb-2"
										className="mb-1 rounded-4"
										style={{ width: '30vw', height: '5vw' }}
									/>
								</div>
							</Card>
						</Col>
					) : historyData.length > 0 ? (
						historyData.map((history, index) => (
							<Col key={index} className="mb-3">
								<Card className="flex-row p-3 border-primary rounded-4">
									{/* <Card.Body className='p-0 d-flex flex-column justify-content-between'>
                                            <Card.Title className='mb-1 w-100 d-flex justify-content-between'>
                                                <h4 className='mb-0'>{history.CURRENT_LEVEL}</h4>
                                            </Card.Title>
                                            <Breadcrumb className='custom-breadcrumb'>
                                                <Breadcrumb.Item>{history.SECTION_NAME}</Breadcrumb.Item>
                                                <Breadcrumb.Item active>{history.TOPIC_NAME}</Breadcrumb.Item>
                                            </Breadcrumb>
                                            <p className='mt-2 mb-0 submit-time'>Submission: {formatLocalDate(history.STUDENT_FINISH)}</p>
                                            <div className="w-100 d-flex align-items-center mt-2">
                                                <h3 className='m-0'>
                                                    <i className="bi bi-trophy-fill text-warning"></i>
                                                    <span className='ms-3 text-blue fw-bold'>{history.SCORE}/100</span>
                                                </h3>
                                                <div className="ms-auto">
                                                    {compareLevels(history.CURRENT_LEVEL, history.NEXT_LEVEL) === 'jump' ?(
                                                        <div className='bg-warning py-3 px-5 rounded-35'>
                                                            <i className="bi bi-arrow-up me-1"></i>
                                                            Jump to Level {history.NEXT_LEVEL}
                                                        </div>

                                                    ) : (
                                                        compareLevels(history.CURRENT_LEVEL, history.NEXT_LEVEL) === 'down' ?(
                                                            <div className='bg-red text-white py-3 px-5 rounded-35'>
                                                                <i className="bi bi-arrow-down me-1"></i>
                                                                Go Down to Level {history.NEXT_LEVEL}
                                                            </div>
                                                        ) : (
                                                            <div className='bg-blue text-white py-3 px-5 rounded-35'>
                                                                <i className="bi bi-arrow-repeat me-1"></i>
                                                                Stay in Level {history.NEXT_LEVEL}
                                                            </div>
                                                        )
                                                    )}
                                                    <Link to={`/review/${history.ID_STUDENT_LEARNING}`} className='btn btn-blue'>Review</Link>
                                                </div>
                                            </div>
                                        </Card.Body> */}
									<Card.Body className="p-2 d-flex justify-content-between">
										<div className="d-flex flex-column">
											<h4 className="mb-0">{history.CURRENT_LEVEL}</h4>
											<Breadcrumb className="mt-2 custom-breadcrumb">
												<Breadcrumb.Item>
													{history.SECTION_NAME}
												</Breadcrumb.Item>
												<Breadcrumb.Item active>
													{history.TOPIC_NAME}
												</Breadcrumb.Item>
											</Breadcrumb>
											<p className="mt-2 mb-0 submit-time">
												Submission: {formatLocalDate(history.STUDENT_FINISH)}
											</p>
											<h3 className="mt-4 mb-0">
												<i className="bi bi-trophy-fill text-warning"></i>
												<span className="ms-3 text-blue fw-bold">
													{history.SCORE}/100
												</span>
											</h3>
										</div>
										<div className="d-flex flex-column justify-content-between align-items-end">
											{history.IS_PASS == 1 ? (
												<h5 className="text-green">
													<i className="bi bi-check2-all me-1"></i>
													Topic Finished!
												</h5>
											) : compareLevels(
													history.CURRENT_LEVEL,
													history.NEXT_LEVEL
											  ) === 'jump' ? (
												<h5 className="text-blue">
													<i className="bi bi-arrow-up me-1"></i>
													Jump to {history.NEXT_LEVEL}
												</h5>
											) : compareLevels(
													history.CURRENT_LEVEL,
													history.NEXT_LEVEL
											  ) === 'down' ? (
												<h5 className="text-red">
													<i className="bi bi-arrow-down me-1"></i>
													Go Down to {history.NEXT_LEVEL}
												</h5>
											) : (
												<h5 className="text-dark">
													<i className="bi bi-arrow-repeat me-1"></i>
													Stay in {history.NEXT_LEVEL}
												</h5>
											)}
											<Link
												to={`/learning/review/${history.ID_STUDENT_LEARNING}`}
												className="btn btn-blue py-2 px-5 rounded-35"
											>
												Review
											</Link>
										</div>
									</Card.Body>
								</Card>
							</Col>
						))
					) : (
						<Col className="d-flex flex-column items-center">
							<h4 className="mb-0">Still new?</h4>
							<p className="fs-5 text-muted fw-light">Begin your journey!</p>
							<img src={newBie} alt="" />
							<Button
								as={Link}
								to={'/learning/module'}
								variant="warning"
								className="mt-4 py-2 px-5 rounded-35"
							>
								Explore
							</Button>
						</Col>
					)}
				</Row>
			</Container>
		</div>
	)
}

export default ExerciseHistory
