'use strict';
import React, {Component} from 'react';
import {Provider, Store, Emitter} from 'sbx-react-core';
import TradeChart from 'sbx-react-stock-chart';

import {toDateTime} from 'helpers/helpers';

import './styles/trade.scss';

import MiniTradePanel from 'containers/TradePanel/MiniTradePanel.jsx';

import {
    getAssetsList,
    setSetting,
    getSetting,
    changeGrid,
    deleteChart,
    setDefaultChart,
    setActiveChart,
    removeChartAsset
} from 'actions/Settings';

import { modifyOrder, addOrderToChart } from 'actions/Orders';
import { getQuotesHistory, subscribeQuotes, unsubscribeQuotes} from 'actions/Quotes';
import { addAlertTrigger, removeAlertTrigger, getAlertsList } from 'actions/Alerts';

import { getParams } from 'helpers/Url';

import IconClose from './assets/close.svg?jsx';
import IconModal from './assets/modal.svg?jsx';

class ChartCollapse extends Component {

    render() {
        return <div className="chart-collapse">
            <a onClick={()=>{
                window.open(`/en/platform/chart/${this.props.asset.symbol}`,"_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=100,left=100,width=600,height=400")
            }}><IconModal/>
            </a>
                {this.props.asset.count > 1&&
                <a onClick={()=>{
                    removeChartAsset(this.props.asset)
                }}>
                    <IconClose/>
                </a>}
        </div>
    }
}

@Provider({
    settings: ['settings']
})
class MicroTradePanel  extends Component  {
    render() {
        let { asset, settings = {}} = this.props;
        return <div className="chart-trade-panel">
            <MiniTradePanel
                symbol={asset.symbol}
                micro={!settings.fixChartPanel}
            />
        </div>
    }
}

@Provider({
    lang: ['settings','lang'],
    theme: ['settings','theme'],
    serverUTCTimeOffset: ['settings','serverUTCTimeOffset'],
    activeAssets: ['settings', 'activeAssets'],
    settingChart: ['settings', 'chart'],
    templates: ['settings', 'templates'],
    tokens: ['tokens'],
    alerts: ['alerts'],
    assets: ['assets']
})
export default class Chart extends Component {
    state = {
        rendered: false
    };

    constructor() {
        super();
        getAlertsList();
    }

    render() {

        let {lang, assets, alerts, activeAssets, theme, params, settingChart, tokens, templates = {}, serverUTCTimeOffset} = this.props;

        let _this = this;

        let containers = null;
        let chartAssets = [];


        if(params && params.symbol){
            chartAssets.push({
                symbol:params.symbol,
                digits: assets[params.symbol].digits
            });
        }else{
            activeAssets.forEach((asset, i)=>{
                if(!assets[asset.symbol]){
                    asset.index = i;
                    return removeChartAsset(asset);
                }
                asset.alerts = alerts.filter((alert) => {
                   return alert.symbol === asset.symbol;
                });
                chartAssets.push(asset);
            });

            containers = [
                {
                    position: {
                        top: '30px',
                        left: '5px'
                    },
                    component: MicroTradePanel
                },
                {
                    position: {
                        top: '10px',
                        right: '10px'
                    },
                    component: ChartCollapse
                }]
        }


        let style = {
            prime: '#ff3a4c',
            second_prime: '#f63a4c',
            contrast: '#e1e1e1',
            second_contrast: '#e1e1e1',
            default: '#212f3c',
            second_default: '#212f3c',
        };

        if(theme === 'light'){
            style = {
                prime: '#ff3a4c',
                second_prime: '#f63a4c',
                contrast: '#212f3c',
                second_contrast: '#212f3c',
                default: '#e1e1e1',
                second_default: '#e1e1e1',
            }
        }


        return (
            <div className="chart-main" onContextMenu={e => {
                e.preventDefault();
                return false;
            }}>
                {chartAssets.length ? <TradeChart
                    key={`chart_${theme}`}
                    ref={e => this.Chart = e}
                    {...{
                        feed: {
                            onFeeder: subscribeQuotes,
                            offFeeder: unsubscribeQuotes
                        },
                        getHistory: getQuotesHistory,
                        assets: chartAssets,
                        tokens: tokens[lang],
                        delta_width: 140,
                        style: style,
                        t: 60 * 60,
                        serverUTCTimeOffset,
                        settings: {
                            showVolume: false,
                            showStats: true,
                            brokenCandles: true,
                            showPriceAlerts: settingChart.showPriceAlerts,
                            indicators: {
                                templates: settingChart.showTemplates
                            }
                        },
                        templates,
                        containers: containers,
                        control: {},
                        onChange:(ctx) => {
                            console.log(ctx);
                            if (ctx.event === 'chart:priceAlerts:open') {
                                Emitter.emit('sound','sent');
                                addAlertTrigger(ctx.data);
                            }

                            if (ctx.event === 'chart:priceAlerts:remove') {
                                Emitter.emit('sound','sent');
                                removeAlertTrigger(ctx.data);
                            }

                            if(ctx.event === 'chart:order:sl' || ctx.event === 'chart:order:tp'){
                                let d = Object.assign({}, ctx.data);
                                delete d.elements;
                                addOrderToChart(d);
                                modifyOrder(d);
                            }

                            if(ctx.event === 'chart:indicators:templates:change') {
                                templates.indicators = ctx.data;
                                setSetting({setting:'templates', value:Object.assign({}, templates)})
                            }

                            if(ctx.event === 'change:indicators'){
                                _this.props.activeAssets[ctx._id].indicators = ctx.data;
                                setSetting({
                                    setting: 'activeAssets',
                                    value: _this.props.activeAssets
                                })
                            }

                            if(ctx.event === 'change:drawing_tools'){
                                _this.props.activeAssets[ctx._id].drawing_tools = ctx.data;
                                setSetting({
                                    setting: 'activeAssets',
                                    value: _this.props.activeAssets
                                })
                            }
                        },
                        onContextMenu:(ctx) => {},
                        onMove:(ctx) => {}
                    }}
                />:<div className="text-grey">+ Add asset to layout</div>  }
            </div>
        );
    }
}