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

import {setSetting} from "actions/Settings";

const btnDown = require("../icons/btnDown.svg");
const btnUp = require("../icons/btnUp.svg");
const btnLeft = require("../icons/btnLeft.svg");
const btnRight = require("../icons/btnRight.svg");

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

export default class Hotkeys extends Component {
    onChange = value => {
        return setSetting({setting: 'additionalHotkeys', value})
    }
    render() {
        const {additionalHotkeys} = this.props;
        return (
            <div className="settings-hotkeys">
                <div className="settings-column">
                    <div className="settings-item-col">
                        <div className="label">
                            <Lang>PLATFORM</Lang>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CHANGE_PLATFORM_LAYOUT</Lang>
                            <div className="hotkey-btn">
                                F3
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>SHOW_HIDE_NEWS</Lang>
                            <div className="hotkey-btn">
                                F7
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>SHOW_HIDE_CALENDAR</Lang>
                            <div className="hotkey-btn">
                                F8
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>NEW_ORDER</Lang>
                            <div className="hotkey-btn">
                                F9
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>FULLSCREEN</Lang>
                            <div className="hotkey-btn">
                                F11
                            </div>
                        </div>
                    </div>
                </div>
                <div className="settings-column">
                    <div className="settings-item-col">
                        <div className="label">
                            <Lang>CHART</Lang>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CHANGE_CHARTS_LAYOUT</Lang>
                            <div className="hotkey-btn">
                                F4
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CHANGE_CHART_TYPE</Lang>
                            <div className="hotkey-btn">
                                F5
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>MOVE_TO_OLDEST</Lang>
                            <div className="hotkey-btn">
                                home
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>MOVE_TO_NEWEST</Lang>
                            <div className="hotkey-btn">
                                end
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>ZOOM_IN</Lang>
                            <div className="hotkey-btn">
                                +
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>ZOOM_OUT</Lang>
                            <div className="hotkey-btn">
                                -
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>LONGER_TIMEFRAME</Lang>
                            <div className="hotkey-btn">
                                <Icon src={btnDown}/>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>SHORTER_TIMEFRAME</Lang>
                            <div className="hotkey-btn">
                                <Icon src={btnUp}/>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>DELETE_SELECTED_OBJECT</Lang>
                            <div className="hotkey-btn">
                                delete
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>SWITCH_ACTIVE_CHART</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    <Icon src={btnLeft}/>
                                </div>
                                <div className="hotkey-btn">
                                    <Icon src={btnRight}/>
                                </div>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CHANGE_WORKSPACE</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    <Icon src={btnDown}/>
                                </div>
                                <div className="hotkey-btn">
                                    <Icon src={btnUp}/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={classNames({
                        "settings-item-col": true,
                        "disabled": !additionalHotkeys
                    })}>
                        <div className="settings-item-col-header">
                            <div className="label">
                                <Lang>ADDITIONAL</Lang>
                            </div>
                            <StateBar enable={additionalHotkeys} onChange={this.onChange}/>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CLOSE_ALL</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    alt
                                </div>
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    c
                                </div>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CLOSE_PROFITABLE</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    alt
                                </div>
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    x
                                </div>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>CLOSE_LOSING</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    alt
                                </div>
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    z
                                </div>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>BUY_QUICKLY_FROM_ACTIVE_CHART</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    alt
                                </div>
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    b
                                </div>
                            </div>
                        </div>
                        <div className="settings-hotkeys-row">
                            <Lang>SELL_QUICKLY_FROM_ACTIVE_CHART</Lang>
                            <div className="button-group">
                                <div className="hotkey-btn">
                                    alt
                                </div>
                                <div className="hotkey-btn">
                                    ctrl
                                </div>
                                <div className="hotkey-btn">
                                    s
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}