var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { h } from "@stencil/core";
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import classNames from 'classnames/dedupe';
import axios from 'axios';
import Debounce from 'debounce-decorator';
function makeid(length) {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}
export class Widget {
    constructor() {
        // @State() height: number
        this.dailyGains = [];
        this.monthlyGains = [];
        this.currency = [];
        this.minimalDeposit = {};
    }
    validateName(newValue) {
        if (typeof newValue === null) {
            throw new Error('`strategy` is required');
        }
    }
    handleWindowResize() {
        //this.calculateSize()
    }
    componentDidLoad() {
        console.info('did load');
        //this.calculateSize()
        this.chartId = 'chart' + makeid(5);
        this.getData();
    }
    componentDidRender() {
        console.info('did render');
        this.generateChart();
    }
    calculateSize() {
        const w = this.el.querySelector('.sparkline--container');
        console.log(w.offsetWidth, w.offsetHeight);
        this.width = w.offsetWidth;
        // this.height = w.offsetHeight
    }
    getData() {
        axios({
            method: 'get',
            url: `https://api.purple-trading.com/strategies/${this.strategy}`
        })
            .then((response) => {
            const { name, currency, gainsSum, openPlSum, dailyGains, monthlyGains, minimalDeposit, capitalGuard, performanceFee, managementFee, depositCommission } = response.data;
            this.name = name;
            this.currency = currency;
            this.gain = gainsSum;
            this.openPl = openPlSum;
            this.dailyGains = dailyGains;
            this.monthlyGains = monthlyGains;
            this.minimalDeposit = minimalDeposit;
            this.capitalGuard = capitalGuard;
            this.performanceFee = performanceFee;
            this.managementFee = managementFee;
            this.depositCommission = depositCommission;
            this.generateChart();
        });
    }
    generateChart() {
        /*
        const comp = this
        const options = {
          width: this.width,
          //height: this.height,
    
          fetch(entry) {
            return entry.gain
          },
    
          onmousemove(event, datapoint) {
            const svg = findClosest(event.target, 'svg')
            const tooltip = svg.nextElementSibling
    
            const pos = comp.data.map(i => { return i.date }).indexOf(datapoint.date)
            const firstHalf = pos < comp.data.length / 2
            // const date = (new Date(datapoint.date)).toUTCString().replace(/^.*?, (.*?) \d{2}:\d{2}:\d{2}.*?$/, '$1')
        
        
            tooltip.style.visibility = 'visible'
            tooltip.textContent = `${(datapoint.gain * 100).toFixed(2)} %`
            tooltip.style.top = `${event.offsetY}px`
            if (firstHalf) {
              tooltip.style.left = `${event.offsetX + 20}px`
              tooltip.style.right = 'unset'
            }
            else {
              tooltip.style.left = 'unset'
              tooltip.style.right = `${comp.width - event.offsetX + 20}px`
    
            }
          },
        
          onmouseout() {
            const svg = findClosest(event.target, 'svg')
            const tooltip = svg.nextElementSibling
        
            tooltip.style.visibility = 'hidden'
          }
        }
        const svgEl = this.el.querySelector('.sparkline')
        svgEl.innerHTML = ''
        console.log(svgEl)
        sparkline.sparkline(svgEl, this.data, options)
    
        */
        let chart = am4core.create(this.chartId, am4charts.XYChart);
        chart.responsive.enabled = true;
        //let interfaceColors = new am4core.InterfaceColorSet()
        //chart.data = data
        // the following line makes value axes to be arranged vertically.
        chart.leftAxesContainer.layout = 'vertical';
        // uncomment this line if you want to change order of axes
        //chart.bottomAxesContainer.reverseOrder = true
        let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location = 0;
        dateAxis.renderer.ticks.template.length = 8;
        dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
        dateAxis.renderer.grid.template.disabled = true;
        dateAxis.renderer.ticks.template.disabled = false;
        dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
        var dateAxis2 = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis2.renderer.grid.template.location = 0;
        //dateAxis2.renderer.minGridDistance = 40
        dateAxis2.renderer.labels.template.disabled = true;
        dateAxis2.renderer.grid.template.disabled = true;
        dateAxis2.renderer.tooltip.disabled = true;
        // these two lines makes the axis to be initially zoomed-in
        //dateAxis.start = 0.7
        //dateAxis.keepSelection = true
        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.tooltip.disabled = true;
        valueAxis.zIndex = 1;
        valueAxis.renderer.baseGrid.disabled = true;
        // Set up axis
        valueAxis.renderer.inside = true;
        valueAxis.height = am4core.percent(60);
        valueAxis.renderer.labels.template.verticalCenter = 'bottom';
        valueAxis.renderer.labels.template.padding(2, 2, 2, 2);
        //valueAxis.renderer.maxLabelPosition = 0.95
        valueAxis.renderer.fontSize = '0.8em';
        // uncomment these lines to fill plot area of this axis with some color
        //valueAxis.renderer.gridContainer.background.fill = interfaceColors.getFor('alternativeBackground')
        //valueAxis.renderer.gridContainer.background.fillOpacity = 0.05
        let series = chart.series.push(new am4charts.LineSeries());
        series.data = this.dailyGains.map(i => {
            i.gain = Number((i.gain * 10).toFixed(2));
            return i;
        });
        series.dataFields.dateX = 'date';
        series.dataFields.valueY = 'gain';
        series.tooltipText = '{valueY.value}';
        series.name = 'Series 1';
        series.fill = am4core.color('#53be7f');
        series.stroke = am4core.color('#53be7f');
        series.fillOpacity = 0.1;
        series.strokeWidth = 2;
        series.tooltipText = 'Gain: [bold]{valueY}[/]%';
        series.tooltip.background.fill = am4core.color('#efefef');
        let range = valueAxis.createSeriesRange(series);
        range.value = 0;
        range.endValue = -99999;
        range.contents.stroke = am4core.color('#da0835');
        range.contents.fill = am4core.color('#da0835');
        range.contents.fillOpacity = 0.1;
        range.contents.tooltip.background.fill = am4core.color('#efefef');
        let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis2.tooltip.disabled = true;
        // this makes gap between panels
        valueAxis2.marginTop = 30;
        valueAxis2.renderer.baseGrid.disabled = true;
        valueAxis2.renderer.inside = true;
        valueAxis2.height = am4core.percent(40);
        valueAxis2.zIndex = 3;
        valueAxis2.renderer.labels.template.verticalCenter = 'bottom';
        valueAxis2.renderer.labels.template.padding(2, 2, 2, 2);
        //valueAxis2.renderer.maxLabelPosition = 0.95
        valueAxis2.renderer.fontSize = '0.8em';
        // uncomment these lines to fill plot area of this axis with some color
        // valueAxis2.renderer.gridContainer.background.fill = interfaceColors.getFor('alternativeBackground')
        // valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05
        let series2 = chart.series.push(new am4charts.ColumnSeries());
        series2.data = this.monthlyGains.map(i => {
            i.gain = Number((i.gain * 10).toFixed(2));
            return i;
        });
        //series2.columns.template.width = am4core.percent(50)
        series2.dataFields.dateX = 'date';
        series2.dataFields.valueY = 'gain';
        series2.yAxis = valueAxis2;
        series2.xAxis = dateAxis2;
        series2.tooltipText = '{valueY.value}';
        series2.name = 'Series 2';
        series2.fill = am4core.color('#94d8bd');
        series2.fillOpacity = .6;
        series2.strokeWidth = 0;
        series2.tooltipText = `{dateX.formatDate('MMMM')}\nGain: [bold]{valueY}[/]%`;
        series2.columns.template.adapter.add('fill', function (_, target) {
            if (target.dataItem && (target.dataItem['valueY'] < 0)) {
                return am4core.color('#da0835');
            }
            else {
                return am4core.color('#53be7f');
            }
        });
        chart.cursor = new am4charts.XYCursor();
        chart.cursor.xAxis = dateAxis;
        /*
        let scrollbarX = new am4charts.XYChartScrollbar()
        scrollbarX.series.push(series)
        scrollbarX.marginBottom = 20
        chart.scrollbarX = scrollbarX
        */
    }
    render() {
        console.info('render');
        const className = classNames('pt-widget-page', {
            'my-class': true,
        });
        return h("div", { class: className },
            h("div", { class: "widget--numbers" },
                h("div", { class: "row small" },
                    h("div", { class: "cell" },
                        h("strong", { class: "widget--numbers--header" }, "Performance Fee"),
                        h("em", { class: "widget--numbers--value" },
                            this.performanceFee * 100,
                            " ",
                            h("span", null, "%"))),
                    h("div", { class: "cell" },
                        h("strong", { class: "widget--numbers--header" }, "Management Fee"),
                        h("em", { class: "widget--numbers--value" },
                            this.managementFee * 100,
                            " ",
                            h("span", null, "%"))),
                    h("div", { class: "cell" },
                        h("strong", { class: "widget--numbers--header" }, "Front Fee"),
                        h("em", { class: "widget--numbers--value" },
                            this.depositCommission * 100,
                            " ",
                            h("span", null, "%")))),
                h("div", { class: "row big" },
                    h("div", { class: "cell main" },
                        h("strong", { class: "widget--numbers--header" }, "Gain"),
                        h("em", { class: "widget--numbers--value" },
                            this.gain,
                            " ",
                            h("span", null, "%"))),
                    h("div", { class: "cell" },
                        h("strong", { class: "widget--numbers--header" }, "OpenPL"),
                        h("em", { class: "widget--numbers--value" },
                            this.openPl,
                            " ",
                            h("span", null, "%"))),
                    h("div", { class: "cell" },
                        h("strong", { class: "widget--numbers--header" }, "Min. Deposit"),
                        this.currency.map(c => h("em", { class: "widget--numbers--value" },
                            this.minimalDeposit[c],
                            " ",
                            h("span", null, c)))),
                    h("div", { class: "cell" },
                        h("strong", { class: "widget--numbers--header" }, "CapitalGuard"),
                        h("em", { class: "widget--numbers--value" },
                            this.capitalGuard,
                            " ",
                            h("span", null, "%"))))),
            h("div", { id: this.chartId, class: 'chartdiv' }));
    }
    static get is() { return "pt-widget-page"; }
    static get originalStyleUrls() { return {
        "$": ["widget.styl"]
    }; }
    static get styleUrls() { return {
        "$": ["widget.css"]
    }; }
    static get properties() { return {
        "class": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "class",
            "reflect": false
        },
        "strategy": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "strategy",
            "reflect": false
        },
        "height": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "height",
            "reflect": false
        },
        "chartId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "chart-id",
            "reflect": false
        }
    }; }
    static get states() { return {
        "width": {},
        "dailyGains": {},
        "monthlyGains": {},
        "name": {},
        "currency": {},
        "gain": {},
        "openPl": {},
        "capitalGuard": {},
        "minimalDeposit": {},
        "performanceFee": {},
        "managementFee": {},
        "depositCommission": {}
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "strategy",
            "methodName": "validateName"
        }]; }
    static get listeners() { return [{
            "name": "resize",
            "method": "handleWindowResize",
            "target": "window",
            "capture": false,
            "passive": true
        }]; }
}
__decorate([
    Debounce(1000),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], Widget.prototype, "handleWindowResize", null);
