import { Component, Input, SimpleChanges } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget';

export interface NbpFidPyramidChartColumn {
    value: string;
    label: string;
    format: (val: number) => string;
}


export interface NbpFidPyramidChartConfig {
    squareValue: string;
    colorKey: string;
    footerItem: any;
}

@Component({
    selector: 'nbp-fid-pyramid-chart',
    templateUrl: './nbp-fid-pyramid-chart.component.html',
    styleUrls: ['./nbp-fid-pyramid-chart.component.scss']
})
export class NbpFidPyramidChartComponent extends NbpBaseComponent {
    constructor() {
        super()
    }

    @Input() columns: NbpFidPyramidChartColumn[] = [
        { value: 'modello', label: 'Modello', format: (val: number) => val.toFixed(2) },
        { value: 'attuale', label: 'Attuale', format: (val: number) => val.toFixed(2) },
        { value: 'controvalore', label: 'Controvalore', format: (val: number) => val.toFixed(2) },
    ];

    @Input() data: any[] = [
        { area: 'Exxxx', modello: 5.00, attuale: 1.04, controvalore: 502.37, colorKey: '#F44336' },
        { area: 'Ixxxx', modello: 75.00, attuale: 95.92, controvalore: 46258.92, colorKey: '#FF9800' },
        { area: 'Pxxx', modello: 0.00, attuale: 0.00, controvalore: 0.00, colorKey: '#FFC107' },
        { area: 'Rxxx', modello: 10.00, attuale: 0.00, controvalore: 0.00, colorKey: '#3F51B5' },
        { area: 'La', modello: 10.00, attuale: 3.04, controvalore: 1469.30, colorKey: '#673AB7' },
    ];

    @Input() config: NbpFidPyramidChartConfig = {
        squareValue: 'area',
        // colors: [],
        colorKey: 'colorKey',
        footerItem: {
            area: 'Patrimonio Fideuram',
            modello: 100.00,
            attuale: 100.00,
            controvalore: 48230.59,
        }
    };

    pyramidColumns: any[] = [];
    pyramidData: any[] = [];

    ngOnInit(): void {
        this.updateChart();
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes['data'] || changes['config']) {
            this.updateChart();
        }
    }

    updateChart(): void {
        this.pyramidColumns = [
            { value: 'area', label: 'Area', format: (val: number) => val.toString() },
            { value: 'pyramidSliceValue', label: '' }
        ].concat(this.columns);

        let pyramidSliceValue = 90;
        this.pyramidData = this.data.map(item => {
            let pyramidVal = pyramidSliceValue;
            pyramidSliceValue += 30;
            return {
                pyramidSliceValue: pyramidVal,
                ...item
            };
        });

        this.pyramidData.sort((a, b) => a.pyramidSliceValue - b.pyramidSliceValue);
    }

    getClipPath(index: number, total: number): string {
        const baseWidth = 100;
        const step = baseWidth / total;

        const widthOfTop = baseWidth - step * (total - (index + 1));
        const topLeftTop = (baseWidth - widthOfTop) / 2;
        const topRightTop = 100 - topLeftTop;
        const currentWidth = baseWidth - step * (total - 1 - index);
        const previousWidth = baseWidth - step * (total - index);

        const topLeft = (baseWidth - previousWidth) / 2;
        const topRight = 100 - topLeft;
        const bottomLeft = (baseWidth - currentWidth) / 2;
        const bottomRight = 100 - bottomLeft;

        if (index === 0) {
            return `polygon(50% 0%, ${topLeftTop}% 100%,  ${topRightTop}% 100%)`;
        } else {
            return `polygon(${topLeft}% 0%, ${topRight}% 0%, ${bottomRight}% 100%, ${bottomLeft}% 100%)`;
        }
    }
}