import "./account.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 Actions from "./components/Actions";
import Kyc from "./components/Kyc";
import Transactions from "./components/Transactions";
import Confirmations from "./components/Confirmations";

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

export default class Account extends Component {
    state = {
        activeTab: "general"
    };
    setTab = tab => {
        this.setState({activeTab: tab})
    };
    getTabContent = () => {
        const {activeTab} = this.state;
        switch(activeTab) {
            case "general": return <General/>;
            case "actions": return <Actions/>;
            case "kyc": return <Kyc/>;
            case "confirmations": return <Confirmations/>;
            case "transactions": return <Transactions/>
        }
    };
    render() {
        const {activeTab} = this.state;
        return (
            <div className="app-cabinet-container">

            <div className="settings">

                <div className="settings-header">
                    <div className="title"><Lang>ACCOUNT_TITLE</Lang></div>
                    <div className="subtitle"><Lang>ACCOUNT_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>PERSONAL_INFO</Lang>
                        </div>
                        <div
                            className={classNames({
                                "settings-tabs-item": true,
                                "active": activeTab === "transactions"
                            })}
                            onClick={() => {
                                Emitter.emit('sound','tab');
                                this.setTab("transactions")
                            }}
                        >
                            <Lang>TRANSACTIONS</Lang>
                        </div>
                        {/*<div*/}
                            {/*className={classNames({*/}
                                {/*"settings-tabs-item": true,*/}
                                {/*"active": activeTab === "kyc"*/}
                            {/*})}*/}
                            {/*onClick={() => {*/}
                                {/*Emitter.emit('sound','tab');*/}
                                {/*this.setTab("kyc")*/}
                            {/*}}*/}
                        {/*>*/}
                            {/*<Lang>KYC</Lang>*/}
                        {/*</div>*/}

                        {/*<div*/}
                            {/*className={classNames({*/}
                                {/*"settings-tabs-item": true,*/}
                                {/*"active": activeTab === "sounds"*/}
                            {/*})}*/}
                            {/*onClick={() => {*/}
                                {/*Emitter.emit('sound','tab');*/}
                                {/*this.setTab("sounds")*/}
                            {/*}}*/}
                        {/*>*/}
                            {/*<Lang>SECURITY</Lang>*/}
                        {/*</div>*/}
                        {/*<div*/}
                            {/*className={classNames({*/}
                                {/*"settings-tabs-item": true,*/}
                                {/*"active": activeTab === "actions"*/}
                            {/*})}*/}
                            {/*onClick={() => {*/}
                                {/*Emitter.emit('sound','tab');*/}
                                {/*this.setTab("actions")*/}
                            {/*}}*/}
                        {/*>*/}
                            {/*<Lang>ACTIONS</Lang>*/}
                        {/*</div>*/}
                    </div>
                    <div className="settings-tabs-content">
                        {this.getTabContent()}
                    </div>
                </div>
            </div>
            </div>
        )
    }
}