import React from 'react';
import { Link, useParams, Navigate } from 'react-router-dom';
import { Container, Row, Col, Tab, Nav, Button } from 'react-bootstrap';
import topicImage from '../../../../assets/images/illustration/listening.png';
import topicIlustration from '../../../../assets/images/illustration/topic.png';

import useTopic from '../hooks/useTopics';
import useSections from '../../learning/hooks/useSections';

import { useSlugContext } from '../../../../utils/SlugContext';
import { slugify, unSlugify } from '../../../../utils/Constant';

import Skeleton from 'react-loading-skeleton';

const Topic = () => {
    const { section } = useParams();
    const { topics, sections, loading, error, thumbPath} = useTopic(section);
    // const { sections, loadingSec, errorSec } = useSections();

    // const currentSection = sections.find(sec => sec.name === section);
    // const filteredTopics = topics.filter(topic => topic.sectionId === section);


    if (loading) {
        return (
            <div className='row'>
                <div className="col-3">
                    <Skeleton count={5} containerClassName='w-100' className='w-100 mb-3' height={40} />
                </div>
                <div className="col-9">
                    <Skeleton containerClassName='w-100' className='w-100 mb-3' style={{height:"20vh"}} />
                    <Skeleton containerClassName='w-100' className='w-100 mb-3' style={{height:"40vh"}} />
                </div>
            </div>
        );
    }

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

    return (
        <div className='topic-page'>
            {topics.length === 0 ? (
                <h1>Belum ada topic</h1>
            ) : (
                <Tab.Container id="left-tabs-example" defaultActiveKey={topics[0].ID_TOPIC}>
                    <Row>
                        <Col sm={3}>
                            <Nav variant="pills" className="side-nav-area flex-column bg-white p-3 rounded">
                                <div className="mb-3 d-flex align-items-center">
                                    <Button variant='blue' className='btn-square-back' as={Link} to="/learning/module">
                                        <i className="bi bi-arrow-90deg-left"></i>
                                    </Button>
                                    <h6 className='mb-0 ms-2 fw-bold'>
                                        Topic list of <span className='text-blue'>{unSlugify(sections.NAME_SECTION)}</span>
                                    </h6>
                                </div>
                                {/* {filteredTopics.map((topic, index) => (
                                    <Nav.Item key={topic.id}>
                                        <Nav.Link eventKey={topic.id}>{index + 1}. {topic.name}</Nav.Link>
                                    </Nav.Item>
                                ))} */}
                                {topics.map((topic, index) => (
                                    <Nav.Item key={topic.ID_TOPIC}>
                                        <Nav.Link eventKey={topic.ID_TOPIC}>{index + 1}. {topic.NAME_TOPIC}</Nav.Link>
                                    </Nav.Item>
                                ))}
                            </Nav>
                        </Col>
                        <Col sm={9}>
                            <Tab.Content>
                                {/* <div className="head-title p-5 mb-3 rounded rounded-4" style={{ backgroundImage: `linear-gradient( #000000c7, #000000c7 ),url(${currentSection?.image})` }}>
                                    <h6 className='mb-3'>
                                        <i className="bi bi-book me-1"></i>
                                        Learning /
                                        <span className='fw-bold text-white text-capitalize'> {currentSection?.name}</span>
                                    </h6>
                                    <p className='text-white w-75'>
                                        {currentSection?.description}
                                    </p>
                                </div> */}
                                <div className="head-title p-5 mb-3 rounded rounded-4" style={{ backgroundImage: `linear-gradient( #000000c7, #000000c7 ),url(${thumbPath}${sections.THUMBNAIL})` }}>
                                    <h6 className='mb-3'>
                                        <i className="bi bi-book me-1"></i>
                                        Learning /
                                        <span className='fw-bold text-white text-capitalize'> {sections.NAME_SECTION}</span>
                                    </h6>
                                    <p className='text-white w-75'>
                                        {sections.DESCRIPTION_SECTION}
                                    </p>
                                </div>
                                {topics.map((topic, index) => (
                                    <Tab.Pane eventKey={topic.ID_TOPIC} key={topic.ID_TOPIC}>
                                        <div className="topic-content p-4 d-flex w-100 rounded rounded-4 bg-white">
                                            <img src={topicIlustration} alt="" className='w-25 me-3'/>
                                            <div className='w-75 d-flex flex-column'>
                                                <h3>Topic {index + 1}: {topic.NAME_TOPIC}</h3>
                                                <p className='text-secondary'>
                                                    {topic.DESCRIPTION_TOPIC}
                                                </p>
                                                <Button as={Link} to={slugify(topic.NAME_TOPIC)} variant='warning' className='ms-auto mt-auto py-2 px-5 rounded-35'>Start Topic</Button>
                                            </div>
                                        </div>
                                    </Tab.Pane>
                                ))}
                            </Tab.Content>
                        </Col>
                    </Row>
                </Tab.Container>
            )}
        </div>
    );
};

export default Topic;

