import React from 'react';
import { ThemeProvider, CssBaseline, createMuiTheme } from '@material-ui/core';
import { QBQueryElem } from './querybuilder/QBQueryElem';
import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem, QueryNodeElem, queryOr, queryAnd } from '../lib/Query';

const darkTheme = createMuiTheme({
    palette: {
        type: 'dark'
    },
});

export default function Window(props: any) {
    let queens = new QueryLeafElem(
        QueryLeafBy.ArtistName,
        QueryLeafOp.Equals,
        "Queens of the Stone Age"
    );
    let muse = new QueryLeafElem(
        QueryLeafBy.ArtistName,
        QueryLeafOp.Equals,
        "Muse"
    );
    let dawnbros = new QueryLeafElem(
        QueryLeafBy.ArtistName,
        QueryLeafOp.Equals,
        "Dawn Brothers"
    );
    let query = queryOr(
        queryAnd(queens, muse),
        dawnbros
    );

    return <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <QBQueryElem elem={query} />
    </ThemeProvider>
}