import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import ImportContactsIcon from '@material-ui/icons/ImportContacts';
import Button from '@material-ui/core/Button';
import LabelIcon from '@material-ui/icons/Label';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

import { GridGallery } from './gridgallery.js';
import { MapView } from './map.js';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
    },
    albumscontainer: {
    },
    albumitemcontainer: {
        display: "block",
    },
    tagscontainer: {
    },
    tagitemcontainer: {
        display: "block",
    },
}));

export function AlbumItemView(props) {
    const { album } = props;

    return (
        <Button
            variant="outlined"
            startIcon={<ImportContactsIcon />}>
            {album.state.relative_path}
        </Button>
    )
}

export function AlbumsView(props) {
    const classes = useStyles();
    const { albums } = props;

    return (
        <Box className={classes.albumscontainer}>
            {
                albums.map(elem => {
                    return (
                        <Box className={classes.albumitemcontainer}>
                            <AlbumItemView album={elem} />
                        </Box>
                    )
                })
            }
        </Box>
    )
}

export function TagItemView(props) {
    const { tag } = props;

    return (
        <Button
            variant="outlined"
            startIcon={<LabelIcon />}>
            {tag.state.name}
        </Button>
    )
}

export function TagsView(props) {
    const classes = useStyles();
    const { tags } = props;

    return (
        <Box className={classes.tagscontainer}>
            {
                tags.map(elem => {
                    return (
                        <Box className={classes.tagitemcontainer}>
                            <TagItemView tag={elem} />
                        </Box>
                    )
                })
            }
        </Box>
    )
}

export function ImagesView(props) {
    return <GridGallery {...props} />;
}

function TabPanel(props) {
    const { children, activeIndex, myIndex } = props;

    return (
        <>
            {activeIndex === myIndex && <Box>{children}</Box>}
        </>
    );
}

export function ResultsView(props) {
    const classes = useStyles();
    const { photos, albums, tags } = props;
    const [ activeIndex, setActiveIndex ] = React.useState(0);

    var _ = require('lodash');

    function tabProps(index) {
        return {
            id: _.uniqueId("tab_"),
        };
    }

    const handleChange = (e, newindex) => {
        setActiveIndex(newindex);
    }

    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Tabs value={activeIndex} onChange={handleChange}>
                    <Tab label="Images" {...tabProps(0)} />
                    <Tab label="Albums" {...tabProps(1)} />
                    <Tab label="Tags" {...tabProps(2)} />
                    <Tab label="Map" {...tabProps(3)} />
                </Tabs>
            </AppBar>
            <TabPanel activeIndex={activeIndex} myIndex={0}>
                <Box className={classes.root}>
                    <ImagesView className={classes.root} photos={photos} />
                </Box>
            </TabPanel>
            <TabPanel activeIndex={activeIndex} myIndex={1}>
                <Box className={classes.root}>
                    <AlbumsView className={classes.root} albums={albums} />
                </Box>
            </TabPanel>
            <TabPanel activeIndex={activeIndex} myIndex={2}>
                <Box className={classes.root}>
                    <TagsView className={classes.root} tags={tags} />
                </Box>
            </TabPanel>
            <TabPanel activeIndex={activeIndex} myIndex={3}>
                <Box className={classes.root}>
                    <MapView></MapView>
                </Box>
            </TabPanel>
        </div>
    );
}