import "./Menu.scss";

import React, {Component} from "react";
import {Provider, Store} from 'sbx-react-core';

import {Link, browserHistory} from "react-router";

import {logout} from "actions/Profile";
import Lang from 'components/Language';


import IconTrading from "./icons/chart.svg?jsx";
import IconAccount from "./icons/user.svg?jsx";
import IconSettings from "./icons/settings.svg?jsx";
import IconLogout from "./icons/logout.svg?jsx";

@Provider({
    settings: ['settings']
})
export default class Menu extends Component {
    state = {
        view: false
    };
    setView = view => {
        this.setState({view})
    };
    onHide = () => {
        this.setState({view: false})
    };
    render() {
        const {view} = this.state;
        const {settings} = this.props;
        return (
            <>
                {
                    !view && (
                        <ul className="list-box">
                            <li>
                                <Link to={`/${this.props.lang}/platform`}>
                                    <i className="icon-sm icon-gray mr-md">
                                        <IconTrading/>
                                    </i>
                                    <span>
                                        <Lang>TRADING</Lang>
                                    </span>
                                </Link>
                            </li>

                            {settings.display.account&&<li className="header-menu-list-item">
                                <Link to={`/${settings.lang}/platform/cabinet/account`}>
                                    <i className="icon-sm icon-gray mr-md">
                                        <IconAccount/>
                                    </i>
                                    <span>
                                        <Lang>MY_ACCOUNT</Lang>
                                    </span>
                                </Link>
                            </li>}

                            {(__config.links&&__config.links.account)&&<li className="header-menu-list-item">
                                <a href={`${__config.links.account}`}>
                                    <i className="icon-sm icon-gray mr-md">
                                        <IconAccount/>
                                    </i>
                                    <span>
                                        <Lang>MY_ACCOUNT</Lang>
                                    </span>
                                </a>
                            </li>}

                            <li>
                                <Link to={`/${settings.lang}/platform/cabinet/settings`}>
                                    <i className="icon-sm icon-gray mr-md">
                                        <IconSettings/>
                                    </i>
                                    <span><Lang>SETTINGS</Lang></span>
                                </Link>
                            </li>
                            <li>
                                <a onClick={logout}>
                                    <i className="icon-sm icon-gray mr-md">
                                        <IconLogout/>
                                    </i>
                                    <span><Lang>SIGN_OUT</Lang></span>
                                </a>
                            </li>
                        </ul>
                    )
                }
            </>
        )
    }
}