import React from 'react';
import MovieSettings from './MovieSettings';
import GeneralSettings from './GeneralSettings';
import style from './SettingsPage.module.css';
import GlobalInfos from '../../utils/GlobalInfos';

type SettingsPageState = {
    currentpage: string
}

/**
 * The Settingspage handles all kinds of settings for the mediacenter
 * and is basically a wrapper for child-tabs
 */
class SettingsPage extends React.Component<{}, SettingsPageState> {
    constructor(props: Readonly<{}> | {}, context?: any) {
        super(props, context);

        this.state = {
            currentpage: 'general'
        };
    }

    /**
     * load the selected tab
     * @returns {JSX.Element|string} the jsx element of the selected tab
     */
    getContent(): JSX.Element | string {
        switch (this.state.currentpage) {
            case 'general':
                return <GeneralSettings/>;
            case 'movies':
                return <MovieSettings/>;
            case 'tv':
                return <span/>; // todo this page
            default:
                return 'unknown button clicked';
        }
    }

    render() : JSX.Element {
        const themestyle = GlobalInfos.getThemeStyle();
        return (
            <div>
                <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
                    <div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
                    <div onClick={() => this.setState({currentpage: 'general'})}
                         className={style.SettingSidebarElement}>General
                    </div>
                    <div onClick={() => this.setState({currentpage: 'movies'})}
                         className={style.SettingSidebarElement}>Movies
                    </div>
                    <div onClick={() => this.setState({currentpage: 'tv'})}
                         className={style.SettingSidebarElement}>TV Shows
                    </div>
                </div>
                <div className={style.SettingsContent}>
                    {this.getContent()}
                </div>
            </div>
        );
    }
}

export default SettingsPage;