import React, { } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { Document } from '../accessor/document';

import { Link, Paper, Theme, Box, useTheme, Typography } from '@mui/material';
import { ThumbnailContainer } from '../page/reader/reader';
import { TagChip } from '../component/tagchip';


export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
export const makeContentReaderUrl = (id: number) => `/doc/${id}/reader`;

const useStyles = ((theme: Theme) => ({
    thumbnail_content: {
        maxHeight: '400px',
        maxWidth: 'min(400px, 100vw)',
    },
    tag_list: {
        display: 'flex',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
        overflowY: 'hidden',
        '& > *': {
            margin: theme.spacing(0.5),
        },
    },
    title: {
        marginLeft: theme.spacing(1),
    },
    infoContainer: {
        padding: theme.spacing(2),
    },
    subinfoContainer: {
        display: 'grid',
        gridTemplateColumns: '100px auto',
        overflowY: 'hidden',
        alignItems: 'baseline',
    },
    short_subinfoContainer: {
        [theme.breakpoints.down("md")]: {
            display: 'none',
        },
    },
    short_root: {
        overflowY: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        [theme.breakpoints.up("sm")]: {
            height: 200,
            flexDirection: 'row',
        },
    },
    short_thumbnail_anchor: {
        background: '#272733',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        [theme.breakpoints.up("sm")]: {
            width: theme.spacing(25),
            height: theme.spacing(25),
            flexShrink: 0,
        }
    },
    short_thumbnail_content: {
        maxWidth: '100%',
        maxHeight: '100%',
    },
}))

export const ContentInfo = (props: {
    document: Document, children?: React.ReactNode, classes?: {
        root?: string,
        thumbnail_anchor?: string,
        thumbnail_content?: string,
        tag_list?: string,
        title?: string,
        infoContainer?: string,
        subinfoContainer?: string
    },
    gallery?: string,
    short?: boolean
}) => {
    //const classes = useStyles();
    const theme = useTheme();
    const document = props.document;
    const propclasses = props.classes ?? {};
    /*const rootName = props.short ? classes.short_root : classes.root;
    const thumbnail_anchor = props.short ? classes.short_thumbnail_anchor : "";
    const thumbnail_content = props.short ? classes.short_thumbnail_content :
        classes.thumbnail_content;
    const subinfoContainer = props.short ? classes.short_subinfoContainer :
        classes.subinfoContainer;*/
    const url = props.gallery === undefined ? makeContentReaderUrl(document.id) : makeContentInfoUrl(document.id);
    return (<Paper sx={{
        display: "flex",
        [theme.breakpoints.down("sm")]: {
            flexDirection: "column",
            alignItems: "center",
        }
    }} elevation={4}>
        <Link /*className={propclasses.thumbnail_anchor ?? thumbnail_anchor}*/ component={RouterLink} to={{
            pathname: makeContentReaderUrl(document.id)
        }}>
            {document.deleted_at === null ?
                (<ThumbnailContainer content={document}
                    style={{
                        maxHeight: '400px',
                        maxWidth: 'min(400px, 100vw)',
                    }}/>)
                : (<Typography/* className={propclasses.thumbnail_content ?? thumbnail_content} */ variant='h4'>Deleted</Typography>)}
        </Link>
        <Box /*className={propclasses.infoContainer ?? classes.infoContainer}*/>
            <Link variant='h5' color='inherit' component={RouterLink} to={{pathname: url}}
                /*className={propclasses.title ?? classes.title}*/>
                {document.title}
            </Link>
            <Box /*className={propclasses.subinfoContainer ?? subinfoContainer}*/>
                {props.short ? (<Box /*className={propclasses.tag_list ?? classes.tag_list}*/>{document.tags.map(x =>
                    (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)
                )}</Box>) : (
                    <ComicDetailTag tags={document.tags}/* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
                }
            </Box>
        </Box>
    </Paper>);
}

function ComicDetailTag(prop: {
    tags: string[]/*classes:{
    tag_list:string
}*/}) {
    let allTag = prop.tags;
    const tagKind = ["artist", "group", "series", "type", "character"];
    let tagTable: { [kind: string]: string[] } = {};
    for (const kind of tagKind) {
        const tags = allTag.filter(x => x.startsWith(kind + ":")).map(x => x.slice(kind.length + 1));
        tagTable[kind] = tags;
        allTag = allTag.filter(x => !x.startsWith(kind + ":"));
    }
    return (<React.Fragment>
        {tagKind.map(key => (
            <React.Fragment key={key}>
                <Typography variant='subtitle1'>{key}</Typography>
                <Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
            </React.Fragment>
        ))}
        <Typography variant='subtitle1'>Tags</Typography>
        <Box /*lassName={prop.classes.tag_list}*/>
            {allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
        </Box>
    </React.Fragment>);
}