import React, { useEffect, useState } from 'react';
import { Container, Row, Col, Card, Button, Breadcrumb } from 'react-bootstrap';
import { Link, useParams } from 'react-router-dom';
import { useGoBack } from '../../../../utils/NavigationBack';
import useMaterial from '../hooks/useMaterials';

import MediaViewer from './components/MediaViewer';

import { MEDIA_URL } from '../../../../utils/Constant';

import { unSlugify } from '../../../../utils/Constant';
import Skeleton from 'react-loading-skeleton';

const Material = () => {
    const { section, topic, level } = useParams();
    const goBack = useGoBack();

    const { materials, loading, error } = useMaterial(section, topic, unSlugify(level));
    const [localLoader, setLoader]= useState(true);

    const [mediaUrls, setMedia] = useState([]);
    const mediaPath = `${MEDIA_URL}/level`;

    useEffect(() => {
        if (!loading) {
            if (materials.IMAGE) setMedia([`${mediaPath}/image/${materials.IMAGE}`]);
            if (materials.AUDIO) setMedia([`${mediaPath}/audio/${materials.AUDIO}`]);
            if (materials.VIDEO) setMedia([materials.VIDEO]);
            setLoader(false);
        }
    }, [loading])

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

    return (
        <Container className='material-page'>
            <Row>
                <Col className="d-flex align-items-center mb-3 breadcrumb-con">
                    <Button variant='blue' className='btn-square-back' onClick={goBack}>
                        <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 href={`/learning/module/${section}/${topic}`} className='text-capitalize'>{unSlugify(topic)}</Breadcrumb.Item>
                        <Breadcrumb.Item active>{unSlugify(level)}</Breadcrumb.Item>
                    </Breadcrumb>
                    <Button as={Link} to={`/learning/module/${section}/${topic}/${level}/exercise`} variant='blue' className='py-2 px-4 ms-auto rounded-35'>
                        Take test
                        <i className="bi bi-arrow-right-circle-fill ms-2"></i>
                    </Button>
                </Col>
            </Row>

            {localLoader ? (    
                <div className='row bg-white rounded rounded-4 p-4 mb-5 d-flex align-items-center flex-column'>
                    <Skeleton containerClassName='w-50' className='w-100 mb-1 rounded-3' style={{height:"15vh"}} />
                    <Skeleton containerClassName='w-100' className='w-100 mb-1 rounded-3' count={6} style={{height:"2vh"}} />
                </div>
            ) : (
                <Container fluid className='bg-white rounded rounded-4 p-4 mb-5'>
                    <Row>
                        <Col>
                            {/* <div className='my-3 w-100 d-flex items-center'>
                                    <audio controls src={audio}></audio>
                            </div> */}

                            {/* {mediaUrls.length > 0 && <MediaViewer mediaUrls={mediaUrls} />} */}
                            {/* <p className="m-0">
                                {materials.CONTENT}
                            </p> */}
                            
                            <div
                                dangerouslySetInnerHTML={{ __html: materials.CONTENT }}
                            />

                            {/* <div className='my-3 d-flex items-center'>
                                <img src={image} alt="" />
                            </div>
                            <p className="m-0">
                                So while the distant hum and rustle might paint a picture of deep contemplation, remember that this narrative is a masterclass in the art of textual non-substance. The rhythm of time and the interplay of light and shadow are just clever ways to make you think there’s more to this than meets the eye. In reality, it's the literary equivalent of a “Coming Soon” sign—full of promise, yet delightfully devoid of any actual meaning.
                            </p>
                            <div className='my-3 w-100 d-flex items-center'>
                                <video src={video} controls className='w-50'></video>
                            </div> */}
                        </Col>
                    </Row>
                </Container>
            )}
        </Container>
    );
};

export default Material;
