import React from 'react';
import {Link, Route, Routes} from "react-router";
import {
    ErrorMessage,
    humanFileSize,
    humanNumber,
    mimetypeColor,
    PageContainer,
    toLocaleString,
    useTitle
} from "./Common";
import {Header, Loading, Panel, Statistic, StatisticGroup} from "./ui";
import {useStatistics} from "../hooks/customHooks";
import {CalculatorsPage} from "./Calculators";
import {BookmarksPage} from "./Bookmarks";

// `statistics` follows useStatistics: null = pending, undefined = fetch failed.
export function StatisticsPage() {
    useTitle('Statistics');

    const {statistics} = useStatistics();

    if (statistics === undefined) {
        return <>
            <Header as='h1'>Statistics</Header>
            <ErrorMessage>Failed to fetch statistics</ErrorMessage>
        </>
    }

    if (statistics && statistics['global_statistics']) {
        let {global_statistics, file_statistics} = statistics;
        const {
            archive_count,
            audio_count,
            ebook_count,
            image_count,
            pdf_count,
            total_count,
            video_count,
            zip_count,
            total_size,
            tagged_files,
            tagged_zims,
            tags_count,
        } = file_statistics;
        const {db_size} = global_statistics;
        return <>
            <Header as='h1'>Statistics</Header>
            <Header as='h2'>Files</Header>
            <Panel>
                <StatisticGroup>
                    <Statistic value={toLocaleString(total_count)} label='All Files'/>
                    <Statistic value={humanFileSize(total_size)} label='Total Size'/>
                </StatisticGroup>
            </Panel>
            <Panel>
                <StatisticGroup>
                    <Link to={'/videos/statistics'}>
                        <Statistic color={mimetypeColor('video/')} value={toLocaleString(video_count)}
                                   label='Videos'/>
                    </Link>
                    <Statistic color={mimetypeColor('application/pdf')} value={toLocaleString(pdf_count)}
                               label='PDFs'/>
                    <Statistic color={mimetypeColor('application/epub')} value={toLocaleString(ebook_count)}
                               label='eBooks'/>
                    <Statistic color={mimetypeColor('text/html')} value={toLocaleString(archive_count)}
                               label='Archives'/>
                    <Statistic color={mimetypeColor('image/')} value={toLocaleString(image_count)}
                               label='Images'/>
                </StatisticGroup>
            </Panel>
            <Panel>
                <StatisticGroup>
                    <Statistic value={toLocaleString(zip_count)} label='ZIP'/>
                    <Statistic color={mimetypeColor('audio/')} value={toLocaleString(audio_count)} label='Audio'/>
                </StatisticGroup>
            </Panel>

            <Header as='h2'>Tags</Header>
            <Panel>
                <StatisticGroup>
                    <Statistic value={humanNumber(tags_count)} label='Tags'/>
                    <Statistic value={humanNumber(tagged_files)} label='Tagged Files'/>
                    <Statistic value={humanNumber(tagged_zims)} label='Tagged Zims'/>
                </StatisticGroup>
            </Panel>

            <Header as='h2'>Database</Header>
            <Panel>
                <StatisticGroup>
                    <Statistic value={humanFileSize(db_size)} label='Size'/>
                </StatisticGroup>
            </Panel>
        </>;
    }

    return <>
        <Header as='h1'>Statistics</Header>
        <Panel><Loading/></Panel>
    </>;

}

export function MoreRoute(props) {
    return <PageContainer>
        <Routes>
            <Route path='calculators' element={<CalculatorsPage/>}/>
            <Route path='statistics' exact element={<StatisticsPage/>}/>
            <Route path='bookmarks' element={<BookmarksPage/>}/>
        </Routes>
    </PageContainer>
}