import React from 'react';
import { Container, Row, Col, Card, Button, ProgressBar } from 'react-bootstrap';
import newBie from '../../../../assets/images/illustration/emptyJourney.png';
import reading from '../../../../assets/images/illustration/reading.png';
import listening from '../../../../assets/images/illustration/listening.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 ? false : true };

  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 => (
                  <Card className='flex-row p-3 mb-3 border-0 shadow shadow-sm rounded-4'>
                    <Card.Img variant="top" src={`${thumbPath}${data.THUMBNAIL}`} 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;