import React, {useState, useEffect} from 'react';
import {Redirect, Route ,Switch,useHistory, useRouteMatch, match as MatchType, Link as RouterLink} from 'react-router-dom';
import { LoadingCircle } from '../component/loading';
import { Link, Paper, makeStyles, Theme, Box, Typography } from '@material-ui/core';
import { Content, makeThumbnailUrl } from '../accessor/contents';

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:{content:Content})=>{
    const additional = props.content.additional;
    if(!('page' in additional)){
        console.error("invalid content : page read fail : "+ JSON.stringify(additional));
        return <Typography>Error. DB error. page restriction</Typography>
    }
    const page:number = additional['page'] as number;
    return (<div>{[...Array(page).keys()].map(x=>(<img src={`/content/${props.content.id}/manga/${x}`} style={{maxHeight:'100%',maxWidth:'100%'}}></img>))}</div>);
}

export default MangaReader;