import React, {useState, useEffect} from 'react';
import {  Typography, useTheme } from '@material-ui/core';
import { Document } from '../../accessor/document';

type MangaType = "manga"|"artist cg"|"donjinshi"|"western"

export type PresentableTag = {
    artist:string[],
    group: string[],
    series: string[],
    type: MangaType,
    character: string[],
    tags: string[],
}

export const MangaReader = (props:{doc:Document})=>{
    const theme = useTheme();
    const additional = props.doc.additional;
    const [curPage,setCurPage] = useState(0);
    if(!('page' in additional)){
        console.error("invalid content : page read fail : "+ JSON.stringify(additional));
        return <Typography>Error. DB error. page restriction</Typography>
    }
    const PageDown = ()=>setCurPage(Math.max(curPage - 1 , 0));
    const PageUP = ()=>setCurPage(Math.min(curPage + 1, page - 1));
    const page:number = additional['page'] as number;
    const onKeyUp = (e: KeyboardEvent)=>{
        if(e.code === "ArrowLeft"){
            PageDown();
        }
        else if(e.code === "ArrowRight"){
            PageUP();
        }
    }
    useEffect(()=>{
        document.addEventListener("keydown",onKeyUp);
        return ()=>{
            document.removeEventListener("keydown",onKeyUp);
        }
    });
    //theme.mixins.toolbar.minHeight;
    return (<div style={{overflow: 'hidden', alignSelf:'center'}}>
            <img onClick={PageUP} src={`/api/doc/${props.doc.id}/manga/${curPage}`}
                style={{maxWidth:'100%', maxHeight:'calc(100vh - 64px)'}}></img>
        </div>);
}

export default MangaReader;