import Skeleton from 'react-loading-skeleton'
import "./contents.css"

const Contents = ({data, readerRef, readerHeight, currentPage, setCurrentPage}) => {
    const Chapter = ({title, id, subId}) => {
        if (!readerRef.current) return
        let totalSections = readerRef.current.getElementsByTagName("section")
        if (totalSections[id] === undefined) return
        let anchorOffset = totalSections[id].offsetTop
        let nextAnchorOffset
        if (totalSections[id+1] != undefined) {
            nextAnchorOffset = totalSections[id+1].offsetTop
        }
        let anchorPage = Math.ceil(anchorOffset / readerHeight)
        let nextAnchorPage
        if (nextAnchorOffset) {
            nextAnchorPage = Math.ceil(nextAnchorOffset / readerHeight)
        }
        return <div
            className={subId !== undefined ? "contents__chapter sub" : "contents__chapter"}
            onClick={() => {
                setCurrentPage(anchorPage)
            }}
            style={{
                backgroundColor: currentPage >= anchorPage && currentPage < nextAnchorPage || currentPage == anchorPage ? "var(--md-sys-color-primary-container)" : ""
            }}
        >
            <md-ripple></md-ripple>
            {title}
        </div>
    }
    if (!readerRef.current || readerRef.current.getElementsByTagName("section").length === 0) {
        return <div className="contents">
                <span className="contents__scroll">
                    <div className="contents__chapter" style={{background: "var(--md-sys-color-primary-container)"}}>
                        <md-ripple></md-ripple>
                        <Skeleton width={200}/>
                    </div>
                    <div className="contents__chapter">
                        <md-ripple></md-ripple>
                        <Skeleton width={130}/>
                    </div>
                    <div className="contents__chapter">
                        <md-ripple></md-ripple>
                        <Skeleton width={180}/>
                    </div>
                </span>
            </div>
    }
    let anchors = data.map(chapter => {
        let chapters = []
        if (chapter.title === "") return false
        chapters.push(<Chapter title={chapter.title} id={chapter.id} key={chapter.id}/>)
        if (chapter.subChapters) {
            chapter.subChapters.map(subchapter => {
                if (subchapter.title === "") return false
                chapters.push(<Chapter title={subchapter.title} id={subchapter.id} subId={subchapter.id} key={subchapter.id}/>)
            })
        }
        return chapters
    }).filter(val => val !== false)
    if (anchors.length === 0) {
        return <></>
    }
    return <div className="contents">
        <span className="contents__scroll">
            {
                anchors
            }
        </span>
    </div>
}

export default Contents