import { Container, Row, Col, Card, Button, ProgressBar } from 'react-bootstrap'
import newBie from '../../../../assets/images/illustration/emptyJourney.png'
import { Link, NavLink } from 'react-router-dom'
import useDashboards from '../hooks/useDashboards'
import { slugify } from '../../../../utils/Constant'
import Skeleton from 'react-loading-skeleton'

function validName(fullName) {
	const nameArray = fullName.split(' ')
	const firstTwoWords = nameArray.slice(0, 2).join(' ')

	return firstTwoWords
}

const Dashboard = () => {
	const { username } = JSON.parse(localStorage.getItem('userData'))

	const { journey, loading, error, thumbPath } = useDashboards()
	const noData = () => {
		return journey.lenght == 0
	}

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

	return (
		<div className="home-page">
			<h1 className="text-blue text-capitalize fw-bold mb-1">
				Hi, {validName(username)} !
			</h1>
			<p className="text-secondary">
				Let’s evolve together with adaptive learning tailored just for you.
			</p>
			<h4 className="text-blue mt-4 fw-bold">Your Last Journey!</h4>
			<Container fluid className="bg-white rounded rounded-4 p-4">
				<Row xs={1} className="filled-journey">
					<Col className="mb-3">
						{loading ? (
							<>
								<Card className="flex-row p-3 mb-3 border-0 shadow shadow-sm rounded-4">
									<div className="w-100 d-flex">
										<Skeleton
											containerClassName="mb-2"
											className="mb-2 rounded-4"
											style={{ width: '10vw', height: '10vw' }}
										/>
										<div className="ps-2 d-flex flex-column justify-content-between">
											<Skeleton
												containerClassName="mb-2"
												className="mb-2 rounded-4"
												style={{ width: '20vw', height: '3vw' }}
											/>
											<Skeleton
												containerClassName="mb-2"
												className="mb-2 rounded-4"
												style={{ width: '30vw', height: '2vw' }}
											/>
										</div>
										<Skeleton
											containerClassName="mb-2 mt-auto ms-auto"
											className="mb-2 rounded-4"
											style={{ width: '17vw', height: '4vw' }}
										/>
									</div>
								</Card>
								<Card className="flex-row p-3 mb-3 border-0 shadow shadow-sm rounded-4">
									<div className="w-100 d-flex">
										<Skeleton
											containerClassName="mb-2"
											className="mb-2 rounded-4"
											style={{ width: '10vw', height: '10vw' }}
										/>
										<div className="ps-2 d-flex flex-column justify-content-between">
											<Skeleton
												containerClassName="mb-2"
												className="mb-2 rounded-4"
												style={{ width: '20vw', height: '3vw' }}
											/>
											<Skeleton
												containerClassName="mb-2"
												className="mb-2 rounded-4"
												style={{ width: '30vw', height: '2vw' }}
											/>
										</div>
										<Skeleton
											containerClassName="mb-2 mt-auto ms-auto"
											className="mb-2 rounded-4"
											style={{ width: '17vw', height: '4vw' }}
										/>
									</div>
								</Card>
							</>
						) : noData() ? (
							<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>
						) : (
							journey.map((data, index) => (
								<Card
									key={index}
									className="flex-row p-3 mb-3 border-0 shadow shadow-sm rounded-4"
								>
									<Card.Img
										variant="top"
										src={
											data.THUMBNAIL ? `${thumbPath}${data.THUMBNAIL}` : newBie
										}
										className="ratio ratio-1x1 rounded rounded-3 me-3"
									/>
									<Card.Body className="p-0 d-flex flex-column justify-content-between">
										<div className="w-75">
											<Card.Title>{data.NAME_SECTION}</Card.Title>
											<Card.Text className="text-muted">
												{data.DESCRIPTION_SECTION}
											</Card.Text>
										</div>
										<div className="w-100 d-flex align-items-end">
											<div className="w-75">
												<div className="d-flex align-items-center">
													<ProgressBar
														now={(
															(data.COMPLETED_TOPICS / data.TOTAL_TOPICS) *
															100
														).toFixed(0)}
														className="w-75"
													/>
													<span className="text-blue ms-2">
														{(
															(data.COMPLETED_TOPICS / data.TOTAL_TOPICS) *
															100
														).toFixed(0)}
														%
													</span>
												</div>
												<p className="text-muted m-0">
													{data.COMPLETED_TOPICS} / {data.TOTAL_TOPICS} Topics
												</p>
											</div>
											<Button
												as={NavLink}
												to={`/learning/module/${slugify(data.NAME_SECTION)}`}
												variant="warning"
												className="ms-auto py-2 px-5 rounded-35"
											>
												Continue
											</Button>
										</div>
									</Card.Body>
								</Card>
							))
						)}
					</Col>
				</Row>
			</Container>
		</div>
	)
}

export default Dashboard