import React, { useEffect } from 'react';

import { makeStyles } from '@material-ui/core/styles';
import { borders } from '@material-ui/system';
import Box from '@material-ui/core/Box';

import { SearchBar } from './searchbar.js';
import { InternalErrorPage } from './error.js';
import { LoadingPage } from './loading.js';
import { ProvideDB, DBTypeEnum, DBSourceEnum } from './database.js';
import { GridGallery } from './gridgallery.js';
import { UserQuery, user_query_from_search_string, maybe_image_query, do_image_query, maybe_album_query, do_album_query } from './queries.js';
import { Browser } from './browser.js';

const useStyles = makeStyles(theme => ({
    root: {
        display: "table",
        "border-spacing": "6px",
        width: "100%",
    },
    navigator: {
        display: "table-cell",
        "width": "300px",
        border: "1px solid black",
        "border-radius": "3px",
        "vertical-align": "top",
    },
    searchandview: {
        display: "table-cell",
        width: "auto",
        border: "1px solid black",
        "border-radius": "3px",
        "vertical-align": "top",
    },
    margined: {
        margin: "6px",
    }
}));

export function LoadedMainPage(props) {
    const classes = useStyles();
    const [gallery_user_query, setGalleryUserQuery] = React.useState(false);
    const [photos, setPhotos] = React.useState(false);
    const [albums, setAlbums] = React.useState(false);

    useEffect(() => {
        // Single-fire effect to start retrieving the albums list.
        var blank_user_query = new UserQuery;
        var sql_album_query = maybe_album_query(blank_user_query);
        do_album_query(sql_album_query, props.database)
            .then(albums => {
                setAlbums(albums);
            });
    }, []);

    useEffect(() => {
        var sql_image_query = maybe_image_query(gallery_user_query);
        setPhotos(false);
        do_image_query(sql_image_query, props.database, props.photos_dir, props.thumbs_dir)
            .then(got_photos => {
                // Make each photo fetch its thumbnail size before proceeding
                var promises = [];
                got_photos.forEach(elem => {
                    promises.push(elem.fetch_thumb_size());
                })
                Promise.all(promises)
                    .then(() => {
                        setPhotos(got_photos);
                    });
            });
    }, [gallery_user_query]);

    function onSearch(q) {
        var query = user_query_from_search_string(q);
        setGalleryUserQuery(query);
    }

    function onBrowser(q) {
        setGalleryUserQuery(q);
    }

    return (
        <>
            <Box className={classes.root}>
                <Box className={classes.navigator}>
                    <Box className={classes.margined}>{albums && <Browser albums={albums} onNewQuery={onBrowser} />}</Box>
                </Box>
                <Box className={classes.searchandview}>
                    <Box className={classes.margined}><SearchBar onSubmit={onSearch} /></Box>
                    <Box className={classes.margined}>{photos && <GridGallery photos={photos} />}</Box>
                </Box>
            </Box>
        </>
    );
}

export const MainPage = () => (
    <ProvideDB db_file={process.env.PUBLIC_URL + "/test_many_photos_db/digikam4.db"} db_source_type={DBTypeEnum.SQLJS_SQLITE} db_target_type={DBTypeEnum.ALASQL_NATIVE}
        db_source_name="sqlite_db" db_target_name="db" db_source={DBSourceEnum.ATTACHFILE}>
        {({ loading, error, done, db }) => (

            <>
                {loading && <LoadingPage file={process.env.PUBLIC_URL + "/test_many_photos_db/digikam4.db"} />}
                {error && <InternalErrorPage message={error} />}
                {done && <LoadedMainPage database={db} photos_dir="/test_many_photos" thumbs_dir="/test_many_photos_thumbs" />}
            </>
        )}
    </ProvideDB>
)