// @ts-strict-ignore
import { Component, OnDestroy, OnInit, ChangeDetectionStrategy } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { Subscription } from "rxjs";
import { NavigationService } from "src/app/shared/components/navigation/service/navigation.service";
import { UnitvaluePipe } from "src/app/shared/pipe/unitvalue/unitvalue.pipe";
import { environment } from "src/environments";
import { Service, Utils } from "../../../../../shared/shared";
import { DefaultTypes } from "../../../../../shared/type/defaulttypes";
import { AbstractSection, EnergyFlow, Ratio, SvgEnergyFlow, SvgSquare, SvgSquarePosition, } from "./abstractsection.component";
import { AnimationService } from "./animation.service";

@Component({
    selector: "[consumptionsection]",
    templateUrl: "./consumption.component.html",
    styleUrls: ["../animation.scss"],
    changeDetection: ChangeDetectionStrategy.Eager,
    standalone: false,
})
export class ConsumptionSectionComponent extends AbstractSection implements OnInit, OnDestroy {
    protected consumptionAnimationClass: string = "consumption-hide";

    private subShow?: Subscription;

    constructor(
        private unitpipe: UnitvaluePipe,
        translate: TranslateService,
        service: Service,
        navigationService: NavigationService,
        router: Router,
        route: ActivatedRoute,
        private animationService: AnimationService,
    ) {
        super(
            "GENERAL.CONSUMPTION",
            "right",
            "var(--ion-color-warning)",
            translate,
            service,
            navigationService,
            router,
            route,
            "Consumption",
            ["common", "consumption"],
        );
    }

    ngOnInit() {
        this.adjustFillRefbyBrowser();
        this.subShow = this.animationService.toggleAnimation$.subscribe((show) => {
            this.consumptionAnimationClass = show ? "consumption-hide" : "consumption-show";
        });
    }

    ngOnDestroy() {
        this.subShow?.unsubscribe();
    }

    protected getStartAngle(): number {
        return 46;
    }

    protected getEndAngle(): number {
        return 134;
    }

    protected getRatioType(): Ratio {
        return "Only Positive [0,1]";
    }

    protected _updateCurrentData(sum: DefaultTypes.Summary): void {
        let arrowIndicate: number;
        // only reacts to kW values (50 W => 0.1 kW rounded)
        if (sum.consumption.activePower > 49) {
            arrowIndicate = Utils.divideSafely(sum.consumption.activePower, sum.system.totalPower);
        } else {
            arrowIndicate = 0;
        }
        super.updateSectionData(sum.consumption.activePower, sum.consumption.powerRatio, arrowIndicate);
    }

    protected getSquarePosition(square: SvgSquare, innerRadius: number): SvgSquarePosition {
        const x = innerRadius - 5 - square.length;
        const y = (square.length / 2) * -1;
        return new SvgSquarePosition(x, y);
    }
    protected getImagePath(): string {
        return environment.icons.COMMON.CONSUMPTION;
    }

    protected getValueText(value: number): string {
        if (value == null || Number.isNaN(value)) {
            return "";
        }
        return this.unitpipe.transform(value, "kW");
    }

    protected initEnergyFlow(radius: number): EnergyFlow {
        return new EnergyFlow(radius, { x1: "0%", y1: "50%", x2: "100%", y2: "50%" });
    }

    protected setElementHeight() {
        this.square.valueText.y = this.square.valueText.y - this.square.valueText.y * 0.3;
        this.square.image.y = this.square.image.y - this.square.image.y * 0.3;
    }

    protected getSvgEnergyFlow(ratio: number, radius: number): SvgEnergyFlow {
        const v = Math.abs(ratio);
        const r = radius;
        const p = {
            topLeft: { x: v, y: v * -1 },
            middleLeft: { x: 0, y: 0 },
            bottomLeft: { x: v, y: v },
            topRight: { x: r, y: v * -1 },
            bottomRight: { x: r, y: v },
            middleRight: { x: r - v, y: 0 },
        };
        if (ratio > 0) {
            // towards right
            p.topRight.x = p.topRight.x - v;
            p.middleRight.x = p.middleRight.x + v;
            p.bottomRight.x = p.bottomRight.x - v;
            p.middleLeft.x = p.topLeft.x + v;
        }
        return p;
    }

    protected getSvgAnimationEnergyFlow(ratio: number, radius: number): SvgEnergyFlow {
        const v = Math.abs(ratio);
        const r = radius;
        const animationWidth = r * -1 - v;
        let p = {
            topLeft: { x: v, y: v * -1 },
            middleLeft: { x: 0, y: 0 },
            bottomLeft: { x: v, y: v },
            topRight: { x: r, y: v * -1 },
            bottomRight: { x: r, y: v },
            middleRight: { x: r - v, y: 0 },
        };
        if (ratio > 0) {
            // towards right
            p.topRight.x = p.topLeft.x + animationWidth * 0.2;
            p.middleRight.x = p.middleLeft.x + animationWidth * 0.2 + 2 * v;
            p.bottomRight.x = p.bottomLeft.x + animationWidth * 0.2;
            p.middleLeft.x = p.middleRight.x - animationWidth * 0.2;
        } else {
            p = null;
        }
        return p;
    }
}
