import React, {Context} from 'react';
import ExhibitionPiece from './ExhibitionPiece';
import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
import NavButton from './NavButton';
import '../Style/ArtPage.css';


type props = {
    pageId: number; // The id of the page
    changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
}

type options = { [key: string]: string };
type state = {
    options: options;
    updateOption: (arg0: string, arg1: string) => void;
};
export const OptionsContext = React.createContext({} as state);

class ArtPage extends React.Component<props, state> {

    updateToggleChoice = (label: string, choice: string) => {
        this.setState(current => ({
            ...current,
            options: {...current.options, [label.toLowerCase()]: choice.toLowerCase()}
        }));
    };

    state = {
        options: {
            "sound": "",
            "background": "one",
            "font": "calibri"
        },
        updateOption: this.updateToggleChoice
    };

    render() {
        return (
            <div className={`artpage background-${this.state.options.background} font-${this.state.options.font}`}>
                <FavoriteButton/>
                <OptionsContext.Provider value={this.state}>
                    <DropDown/>
                </OptionsContext.Provider>
                <ExhibitionPiece artId={this.props.pageId}/>
                <div className={'navbutton left'}>
                    <NavButton changePage={this.props.changePage} direction={"left"}/>
                </div>
                <div className={'navbutton right'}>
                    <NavButton changePage={this.props.changePage} direction={"right"}/>
                </div>
            </div>
        );
    }
}

export default ArtPage;