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 Table from "sbx-react-table";

import Lang from 'components/Language';

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


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'],
    profile: ['profile']
})

export default class GeneralSettings extends Component {
    state = {
        langIsOpen: false
    };
    render() {
        const {settings, profile} = this.props;

        return (
            <div className="container">
                <div>
                    <ul className="list-box">
                        <li className="pt-xs pb-xs pl-sm pr-sm"><Lang>USER_FIRST_NAME</Lang>: {profile.first_name}</li>
                        <li className="pt-xs pb-xs pl-sm pr-sm"><Lang>USER_LAST_NAME</Lang>: {profile.last_name}</li>
                        <li className="pt-xs pb-xs pl-sm pr-sm"><Lang>USER_EMAIL</Lang>: {profile.email}</li>
                        <li className="pt-xs pb-xs pl-sm pr-sm"><Lang>USER_PHONE</Lang>:</li>
                        <li className="pt-xs pb-xs pl-sm pr-sm"><Lang>CREATED</Lang>: {toDateTime(profile.created)}</li>
                    </ul>
                </div>
                <div className="container content-column ml-lg">
                    <h4 className="mt-sm mb-sm"><Lang>ACCOUNTS</Lang>:</h4>
                    <Table
                        key="tableAccounts"
                        name = "tableAccounts"
                        rows = {profile.accounts}
                        config = {{
                            order: ['id', 'ASC']
                        }}
                        structure= {{
                            id_account: {
                                name: <Lang>ID_ACCOUNT</Lang>
                            },
                            currency: {
                                name: <Lang>CURRENCY</Lang>,
                                val(row){
                                        return <div>{row.currency}</div>
                                }
                            },
                            leverage: {
                                name: <Lang>LEVERAGE</Lang>
                            },
                            type: {
                                name: <Lang>TYPE</Lang>
                            },
                            id_platform: {
                                name: <Lang>ID_PLATFORM</Lang>
                            }
                        }
                        }/>

                </div>
            </div>
        )
    }
}