import React, { useEffect } from 'react';

import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

import { SearchBar } from './searchbar.js';
import { InternalErrorPage } from './error.js';
import { LoadingPage } from './loading.js';
import { ProvideDB } from './database.js';
import { UserQuery, user_query_from_search_string, maybe_image_query, do_image_query, maybe_album_query, do_album_query, maybe_tag_query, do_tag_query, ConstFilter, ResultTypeEnum } from './queries.js';
import { Browser } from './browser.js';
import { UserQueryWidget } from './userquerywidget.js';
import { ResultsView } from './resultsview.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(new UserQuery());
    const [photos, setPhotos] = React.useState([]);
    const [allAlbums, setAllAlbums] = React.useState([]);
    const [allTags, setAllTags] = React.useState([]);
    const [albums, setAlbums] = React.useState([]);
    const [tags, setTags] = React.useState([]);
    const { database, photos_dir, thumbs_dir } = props;

    var _ = require('lodash');

    useEffect(() => {
        // Single-fire effect to start retrieving the albums and tags lists.
        var blank_user_query = new UserQuery();
        blank_user_query.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, true);
        blank_user_query.tag_filter = new ConstFilter(ResultTypeEnum.TAG, true);
        var sql_album_query = maybe_album_query(blank_user_query);
        var sql_tag_query = maybe_tag_query(blank_user_query);

        do_album_query(sql_album_query, database)
            .then(albums => {
                setAllAlbums(albums);
            });

        do_tag_query(sql_tag_query, database)
            .then(tags => {
                setAllTags(tags);
            });
    }, [database]);

    useEffect(() => {
        updateAllResults(gallery_user_query);
    }, [database, photos_dir, thumbs_dir]);

    function updateAllResults(q) {
        updateTags(q);
        updateAlbums(q);
        updatePhotos(q);
    }

    function updatePhotos(q) {
        var sql_image_query = maybe_image_query(q, database);
        setPhotos(false);
        do_image_query(sql_image_query, database, photos_dir, thumbs_dir)
            .then(got_photos => {
                // TODO: make the limit configurable and show a warning
                var trunced = got_photos.slice(0, 300);
                setPhotos(trunced);
            });
    }

    function updateTags(q) {
        var sql_tag_query = maybe_tag_query(q, database);
        setTags(false);
        do_tag_query(sql_tag_query, database)
            .then(tags => {
                setTags(tags);
            });
    }

    function updateAlbums(q) {
        var sql_album_query = maybe_album_query(q, database);
        setAlbums(false);
        do_album_query(sql_album_query, database)
            .then(albums => {
                setAlbums(albums);
            });
    }

    function onNewQuery(q) {
        var do_update_photos = !_.isEqual(q.image_filter, gallery_user_query.image_filter);
        var do_update_albums = !_.isEqual(q.album_filter, gallery_user_query.album_filter);
        var do_update_tags = !_.isEqual(q.tag_filter, gallery_user_query.tag_filter);
        setGalleryUserQuery(q);
        if (do_update_photos) { updatePhotos(q); }
        if (do_update_albums) { updateAlbums(q); }
        if (do_update_tags) { updateTags(q); }
    }

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

    return (
        <>
            <Box className={classes.root}>
                <Box className={classes.navigator}>
                    <Box className={classes.margined}>{albums && <Browser albums={allAlbums} tags={allTags} onNewQuery={onNewQuery} />}</Box>
                </Box>
                <Box className={classes.searchandview}>
                    <Box className={classes.margined}><SearchBar onSubmit={onSearch} /></Box>
                    <Box className={classes.margined}><UserQueryWidget userQuery={gallery_user_query} onChange={onNewQuery} /></Box>
                    <Box className={classes.margined}>{photos && <ResultsView photos={photos ? photos : []} albums={albums ? albums : []} tags={tags ? tags : []} />}</Box>
                </Box>
            </Box>
        </>
    );
}

const theme = createMuiTheme({
    typography: {
        fontFamily: ['Roboto', 'sans-serif'].join(','),
    },
    palette: {
        type: 'light',
    },
});


export function MainPage() {
    return (
        <ThemeProvider theme={theme}>
            <ProvideDB
                db_url={window.runtimeConfig.digikamDbUrl}
            >
                {({ db_error, db }) => (

                    <>
                        {(db == null && !db_error) && <LoadingPage file={"digikam4.db"} />}
                        {db_error && <InternalErrorPage message={db_error.message} />}
                        {db != null && <LoadedMainPage
                            database={db}
                            photos_dir={window.runtimeConfig.photosUrl}
                            thumbs_dir={window.runtimeConfig.thumbsUrl}
                        />}
                    </>
                )}
            </ProvideDB>
        </ThemeProvider>
    );
}