import "./settings.scss";

import React, {Component} from "react";
import classNames from "classnames";
import {Provider, Emitter} from 'sbx-react-core';

import Lang from 'components/Language';

import General from "./components/General";
import Notifications from "./components/Notifications";
import Sounds from "./components/Sounds";
import Confirmations from "./components/Confirmations";
import Hotkeys from "./components/Hotkeys";

@Provider({
    settings: ['settings']
})

export default class Settings extends Component {
    state = {
        activeTab: "general"
    };
    setTab = tab => {
        this.setState({activeTab: tab})
    };
    getTabContent = () => {
        const {activeTab} = this.state;
        switch(activeTab) {
            case "general": return <General/>;
            case "notifications": return <Notifications/>;
            case "sounds": return <Sounds/>;
            case "confirmations": return <Confirmations/>;
            case "hotkeys": return <Hotkeys/>
        }
    };
    render() {
        const {activeTab} = this.state;
        let {settings} = this.props;
        return (
            <div className="app-cabinet-container">

            <div className="settings">
                <div className="settings-header">
                    <div className="title"><Lang>SETTINGS_TITLE</Lang></div>
                    <div className="subtitle"><Lang>SETTINGS_SUB_TITLE</Lang></div>
                </div>
                <div className="settings-body">
                    <div className="settings-tabs">
                        <div
                            className={classNames({
                                "settings-tabs-item": true,
                                "active": activeTab === "general"
                            })}
                            onClick={() => {
                                Emitter.emit('sound','tab');
                                this.setTab("general")
                            }}
                        >
                            <Lang>GENERAL</Lang>
                        </div>
                        {settings.display.notifications&&<div
                            className={classNames({
                                "settings-tabs-item": true,
                                "active": activeTab === "notifications"
                            })}
                            onClick={() => {
                                Emitter.emit('sound','tab');
                                this.setTab("notifications")
                            }}
                        >
                            <Lang>NOTIFICATIONS</Lang>
                        </div>}
                        <div
                            className={classNames({
                                "settings-tabs-item": true,
                                "active": activeTab === "sounds"
                            })}
                            onClick={() => {
                                Emitter.emit('sound','tab');
                                this.setTab("sounds")
                            }}
                        >
                            <Lang>SOUNDS</Lang>
                        </div>
                        <div
                            className={classNames({
                                "settings-tabs-item": true,
                                "active": activeTab === "confirmations"
                            })}
                            onClick={() => {
                                Emitter.emit('sound','tab');
                                this.setTab("confirmations")
                            }}
                        >
                            <Lang>PLATFORM_CONFIRMATIONS</Lang>
                        </div>

                        {settings.display.hotkeys&&<div
                            className={classNames({
                                "settings-tabs-item": true,
                                "active": activeTab === "hotkeys"
                            })}
                            onClick={() => {
                                Emitter.emit('sound','tab');
                                this.setTab("hotkeys")
                            }}
                        >
                            <Lang>HOTKEY</Lang>
                        </div>}
                    </div>
                    <div className="settings-tabs-content">
                        {this.getTabContent()}
                    </div>
                </div>
            </div>
            </div>
        )
    }
}