import {Component, Input, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {MenuItem} from 'primeng/api';
import {Configuration, Page} from "src/app/models/Page";
import {ChartWidget} from 'src/app/widgets/chart/models/ChartWidget';
import {Layout, LayoutColumn, LayoutRow} from 'src/app/widgets/Layout';
import {Widget} from 'src/app/widgets/Widget';
import {TableWidget} from 'src/app/widgets/table/models/TableWidget';
import {TextWidget} from 'src/app/widgets/text/models/TextWidget';
import {UtilsService} from 'src/app/services/utils.service';
import {WidgetService} from "../../services/widget.service";
import {ImageWidget} from "../../widgets/image/models/ImageWidget";

@Component({
    selector: 'app-page-editor',
    templateUrl: './page-editor.component.html',
    styleUrls: ['./page-editor.component.css']
})
export class PageEditorComponent implements OnInit {

    @Input() page?: Page;
    widgetsMenuItems: MenuItem[] = [];
    selectedColumn?: LayoutColumn;
    selectedWidget?: Widget;
    sidebarClosed = false;

    constructor(private widgetService: WidgetService, private utils: UtilsService, private translate: TranslateService) {
    }

    ngOnInit(): void {

        if (!this.page)
            this.page = new Page({configuration: Configuration.empty()});

        if (!this.page.configuration) {
            this.page.configuration = Configuration.empty();
        }

        this.initWidgetsMenuItems();
    }

    private initWidgetsMenuItems() {
        this.translate.get(["LABEL.EMPTY", "LABEL.TEXT", "LABEL.TABLE", "LABEL.CHART", "LABEL.LAYOUT", "LABEL.IMAGE"]).subscribe(o => {
            this.widgetsMenuItems = [{
                label: o["LABEL.TEXT"],
                icon: 'pi pi-align-left',
                command: () => {
                    if (!this.selectedColumn) {
                        this.utils.showWarnMessage("No column selected.");
                        return;
                    }
                    this.addWidgetToColumn(this.selectedColumn, "TEXT");
                }
            },
                {
                    label: o["LABEL.TABLE"],
                    icon: 'pi pi-table',
                    command: () => {
                        if (!this.selectedColumn) {
                            this.utils.showWarnMessage("No column selected.");
                            return;
                        }
                        this.addWidgetToColumn(this.selectedColumn, "TABLE");
                    }
                },
                {
                    label: o["LABEL.CHART"],
                    icon: 'pi pi-chart-bar',
                    command: () => {
                        if (!this.selectedColumn) {
                            this.utils.showWarnMessage("No column selected.");
                            return;
                        }
                        this.addWidgetToColumn(this.selectedColumn, "CHART");
                    }
                },
                {
                    label: o["LABEL.IMAGE"],
                    icon: 'pi pi-image',
                    command: () => {
                        if (!this.selectedColumn) {
                            this.utils.showWarnMessage("No column selected.");
                            return;
                        }
                        this.addWidgetToColumn(this.selectedColumn, "IMAGE");
                    }
                }
                // ,{
                //   label: o["LABEL.LAYOUT"],
                //   icon: 'pi pi-desktop',
                //   command: () => {
                //     if (!this.selectedColumn) {
                //       this.utils.showWarnMessage("No column selected.");
                //       return;
                //     }
                //     this.addWidgetToColumn(this.selectedColumn, "LAYOUT");
                //   }
                // }
            ];
        });
    }

    addRow() {
        this.page?.configuration?.layout?.rows.push(LayoutRow.emptyRow())
    }

    removeRow(row: LayoutRow) {
        const index = this.page?.configuration?.layout?.rows.indexOf(row);
        if (index === -1) {
            this.utils.showErrorMessage("Row not found");
            return;
        }
        this.page?.configuration?.layout?.rows.splice(index ?? -1, 1);
    }

    addColumn(row: LayoutRow) {
        row.columns.push(LayoutColumn.emptyColumn());
    }

    removeColumn(row: LayoutRow, column: LayoutColumn) {
        const index = row.columns.indexOf(column);
        if (index === -1) {
            this.utils.showErrorMessage("Column not found");
            return;
        }

        if (column === this.selectedColumn)
            this.selectedColumn = undefined;

        row.columns.splice(index ?? -1, 1);
    }

    refreshWidget(column: LayoutColumn, widget: Widget) {
        const index = column.widgets.indexOf(widget);
        if (index === -1) {
            this.utils.showErrorMessage("Widget not found");
            return;
        }

        this.widgetService.onConfigurationChanged.next(widget);
    }

    removeWidget(column: LayoutColumn, widget: Widget) {
        const index = column.widgets.indexOf(widget);
        if (index === -1) {
            this.utils.showErrorMessage("Widget not found");
            return;
        }
        column.widgets.splice(index ?? -1, 1);
    }
    
    updateSelectedWidget(column: LayoutColumn, i: number) {
       /* const index = column.widgets.indexOf(widget);
        if (index === -1) {
            this.utils.showErrorMessage("Widget not found");
            return;
        }
        */
        this.selectedWidget = column.widgets[i];
    }

    addWidgetToColumn(column: LayoutColumn, type: string) {
        if (!column.widgets)
            column.widgets = [];

        let widget: Widget;

        if (type === "TABLE")
            widget = new TableWidget();
        else if (type === "CHART")
            widget = new ChartWidget();
        else if (type === "IMAGE")
            widget = new ImageWidget()
        else // TEXT
            widget = new TextWidget({content: "HTML widget. Insert your text here."});

        column.widgets.push(widget);
        this.selectedWidget = widget;
    }

}
