import React, {Component} from 'react';
import {Provider} from "sbx-react-core";
import Dropdown     from 'sbx-react-dropdown';
import Notifications from 'sbx-react-notify';
import {Link} from 'react-router';

import Menu from "./components/Menu";

import classNames from 'classnames';

import {Balance} from './components';
import {setConfirmation} from "actions/Interface";

import Lang from 'components/Language';

import './assets/style/header.scss';

import IconMenu from './images/menu.svg?jsx';
import IconWallet from './images/wallet.svg?jsx';
import IconWithdrawal from './images/withdrawals.svg?jsx';
import IconClickOne from './images/clickOne.svg?jsx';

@Provider({
    accountBar: ['settings', 'accountBar'],
    profile: ["profile"],
    settings: ["settings"],
})

export default class Header extends Component {
    render() {
        const {accountBar, profile, settings} = this.props;
        return (
            <header className="app-header">
                <a href='/' className="logo">
                    <img src={'/static/images/'+__config.assets['logo-'+settings.theme]}  alt="logo"/>
                </a>
                <div className="header-info mr-lg">
                    {!accountBar && <Balance/>}
                </div>
                <div className="header-account mr-lg">
                    <span className="header-account-type">
                        <Lang>ACCOUNT</Lang>:&nbsp;
                    </span>
                    <span className="header-account-id">
                        {profile.accounts[0].id_account}
                    </span>
                </div>
                <div className="mr-lg">
                    <Notifications  {...settings.notifications}/>
                </div>

                {__config.links.deposit&&<a href={__config.links.deposit} className="mr-lg">
                    <IconWallet className="icon-xlg"/>
                </a>}

                {__config.links.withdrawal&&<a href={__config.links.withdrawal} className="mr-lg">
                    <IconWithdrawal className="icon-xlg"/>
                </a>}

                {
                settings.display.oneClick &&
                    <a onClick={()=>{
                        setConfirmation({type: "open", value: !settings.confirmations.open})
                    }}
                    className={classNames({
                        'one-click-active': !settings.confirmations.open,
                        'mr-lg': true,
                        'cursor-pointer': true
                    })}>
                    <IconClickOne className="icon-xlg"/>
                </a>
                    }
                <div className="header-menu">
                    <Dropdown
                        ref={e => this.dropdown = e}
                        data={<Menu/>}
                        position="bottom_right"
                        className="header-menu-dropdown"
                    >
                        <IconMenu/>
                    </Dropdown>
                </div>
            </header>
        )
    }
}