import React, {Component} from "react";
import classNames from "classnames";
import {Provider} from "sbx-react-core";
import Dropdown from 'sbx-react-dropdown';
import StateBar from "components/StateBar";
import Icon from "sbx-react-icon";

import Lang from 'components/Language';

import {setLanguage, setProfitOnTab, setAccountBar, resetSettings} from "actions/Interface";
import {setSetting} from "actions/Settings";

const langIcons = {
    en: require("../icons/flags/en.svg"),
    ru: require("../icons/flags/ru.svg"),
    de: require("../icons/flags/de.svg"),
    es: require("../icons/flags/es.svg"),
    fr: require("../icons/flags/fr.svg"),
    pt: require("../icons/flags/pt.svg"),
    cn: require("../icons/flags/cn.svg"),
    ja: require("../icons/flags/ja.svg"),
    pl: require("../icons/flags/pl.svg"),
    ko: require("../icons/flags/ko.svg")
};

const arrowUp = require("../icons/arrow-up.svg");
const arrowDown = require("../icons/arrow-down.svg");

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

export default class GeneralSettings extends Component {
    languages = [
        {
            value: "en",
            label: "English"
        },
        {
            value: "ru",
            label: "Русский"
        },
        {
            value: "de",
            label: "Deutsch"
        },
        {
            value: "pl",
            label: "Polska"
        }
    ];
    state = {
        langIsOpen: false
    };
    render() {
        const {settings} = this.props;
        const {langIsOpen} = this.state;
        return (
            <div className="settings-general">
                <div className="settings-column">
                    <div className="settings-item settings-item-col">
                        <div className="label"><Lang>LANGUAGES</Lang></div>
                        <div className="value">
                            <Dropdown
                                className="lang-dropdown"
                                onChange={show => {
                                    this.setState({langIsOpen: show})
                                }}
                                data={
                                    <div className="settings-select-values">
                                        {this.languages.map(language => {
                                            return (
                                                <div className="settings-select-item" onClick={() => {
                                                    setLanguage(language.value)
                                                }}>
                                                    <Icon src={langIcons[language.value]}/>
                                                    <span className="settings-select-title">
                                                        {language.label}
                                                    </span>
                                                </div>
                                            )
                                        })}
                                    </div>
                                }
                                position="bottom"
                            >
                                <div className="settings-select">
                                    <div className="settings-select-active">
                                        <div className="settings-select-inner">
                                            <Icon src={langIcons[settings.lang]}/>
                                            <span className="settings-select-title">
                                            {this.languages.find(i => i.value === settings.lang).label}
                                        </span>
                                        </div>
                                        <Icon src={!langIsOpen ? arrowDown: arrowUp}/>
                                    </div>
                                </div>
                            </Dropdown>
                        </div>
                    </div>
                    <div className="settings-item settings-item-row">
                        <div className="label">
                            <Lang>SETTINGS_PROFIT_TAB</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={settings['profitOnTab']} onChange={setProfitOnTab}/>
                        </div>
                    </div>
                    <div className="settings-item settings-item-row">
                        <div className="label">
                            <Lang>AUTO_TRADING</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={settings['autoTrading']} onChange={value => {setSetting({setting:"autoTrading", value})}}/>
                        </div>
                    </div>
                    <div className="settings-item settings-item-row">
                        <div className="label">
                            <Lang>FIX_CHART_TRADE_PANEL</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={settings['fixChartPanel']} onChange={value => {setSetting({setting:"fixChartPanel", value})}}/>
                        </div>
                    </div>
                </div>
                <div className="settings-column">
                    <div className="settings-item settings-item-col">
                        <div className="label">
                            <Lang>SKIN</Lang>
                        </div>
                        <div className="value">
                            <div className="settings-button-group">
                                <div
                                    className={classNames({
                                        "settings-button": true,
                                        "active": settings.theme === "light"
                                    })}
                                    onClick={() => {
                                        setSetting({setting:"theme", value:"light"})
                                    }}
                                >
                                    <Lang>
                                        SETTINGS_LIGHT
                                    </Lang>
                                </div>
                                <div
                                    className={classNames({
                                        "settings-button": true,
                                        "active": settings.theme === "dark"
                                    })}
                                    onClick={() => {
                                        setSetting({setting:"theme", value:"dark"})
                                    }}
                                >
                                    <Lang>
                                        SETTINGS_DARK
                                    </Lang>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="settings-item settings-item-row">
                        <div className="label">
                            <Lang>SETTINGS_BAR_VALUE</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={settings['accountBar']}  onChange={value => {setSetting({setting:"accountBar", value})}}/>
                        </div>
                    </div>
                    <div className="settings-item settings-item-col">
                        <div className="label">
                            <Lang>SETTINGS_DEFAULT_RESTORE</Lang>
                        </div>
                        <div className="settings-button reset-button" onClick={resetSettings}>
                            <Lang>RESET_SETTINGS</Lang>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}