import React, { useContext, useEffect } from 'react';
import { NavList, NavItem, Headline, BackItem } from '../component/mod';
import {ArrowBack as ArrowBackIcon, Settings as SettingIcon, 
    Collections as CollectionIcon, VideoLibrary as VideoIcon, Home as HomeIcon} from '@material-ui/icons';
import {GalleryInfo} from '../component/mod';
import {useLocation} from 'react-router-dom';
import { QueryStringToMap } from '../accessor/util';
import { Divider } from '@material-ui/core';

export const Gallery = ()=>{
    const location = useLocation();
    const query = QueryStringToMap(location.search);

    const menu_list = (<NavList>
        {location.search !== "" && <><BackItem/> <Divider/></>}
        <NavItem name="All" to="/" icon={<HomeIcon/>}/>
        <NavItem name="Manga" to="/search?content_type=manga" icon={<CollectionIcon/>}></NavItem>
        <NavItem name="Video" to="/search?content_type=video" icon={<VideoIcon/>}/>
        <Divider/>
        <NavItem name="Settings" to="/setting" icon={<SettingIcon/>}/>
    </NavList>);

    return (<Headline menu={menu_list}>
        <GalleryInfo option={query}></GalleryInfo>
    </Headline>)
}