import { Component, EventEmitter, Input, Output } from '@angular/core';

// modules
import { CommonModule } from '@angular/common';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

// components
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';
import { CaLastFuelPriceProgressComponent } from '../ca-last-fuel-price-progress/ca-last-fuel-price-progress.component';

// json
import taDetailDropdownJson from '../../../assets/json/ta-detail-dropdown.json';

// svg-routes
import { MapDropdownSvgRoutes } from '../ca-map-dropdown/utils/svg-routes';

// models
import {
    DropDownData,
    IDropDownActions,
} from '../ca-details-dropdown/models/detail-dropdown.model';
import { MapDropdownClusterItem, MapDropdownContent } from './models';
import { ILastFuelPriceProgressData } from '../ca-last-fuel-price-progress/interfaces';

// pipes
import { CaSvgPipe } from '../../pipes/ca-svg.pipe';
import {
    MapDropdownContentPipe,
    MapDropdownClusterContentPipe,
    MapDropdownValuePipe,
} from './pipes';
import { DatePipe } from '@angular/common';
import { FormatCurrencyPipe } from '../../pipes/format-currency.pipe';
import { DateFromStringPipe } from '../../pipes/date-from-string.pipe';
import { FormatDurationPipe } from '../../pipes/format-duration.pipe';

// enums
import { eMapDropdownString } from './enums';

@Component({
    selector: 'app-ca-map-dropdown',
    imports: [
        //modules
        CommonModule,
        AngularSvgIconModule,
        NgbTooltip,
        // components
        CaAppTooltipV2Component,
        CaLastFuelPriceProgressComponent,
        // pipes
        CaSvgPipe,
        MapDropdownContentPipe,
        MapDropdownClusterContentPipe,
        MapDropdownValuePipe,
        DatePipe,
        DateFromStringPipe,
        FormatCurrencyPipe,
        FormatDurationPipe,
    ],
    templateUrl: './ca-map-dropdown.component.html',
    styleUrls: ['./ca-map-dropdown.component.scss'],
    providers: [SvgIconRegistryService]
})
export class CaMapDropdownComponent<T> {
    @Input() set infoWindowContent(values: MapDropdownContent | null) {
        this._infoWindowContent = values;

        if (
            values?.selectedClusterItemData?.data?.hasOwnProperty(
                'pricePerGallon'
            )
        )
            this.setFuelPriceData(values?.selectedClusterItemData?.data);
    }
    @Input() set markerData(values: T) {
        this._markerData = values;
        this.isHidden = true;

        if (values?.hasOwnProperty('pricePerGallon'))
            this.setFuelPriceData(values);
    }

    @Output() onClusterItemClick: EventEmitter<number> = new EventEmitter();
    @Output() onClusterListScrollToEnd = new EventEmitter();
    @Output() onBackButtonClick = new EventEmitter();
    @Output() bodyActions: EventEmitter<IDropDownActions> = new EventEmitter();

    public isHidden: boolean = true;
    public isShowAllDaysActive: boolean = false;

    public data: DropDownData[] = taDetailDropdownJson.taDetailDropDown;
    public _markerData: T | null = null;
    public _infoWindowContent: MapDropdownContent | null = null;
    public fuelPriceRangeData: ILastFuelPriceProgressData | null = null;

    public mapDropdownSvgRoutes = MapDropdownSvgRoutes;
    public eMapDropdownString = eMapDropdownString;

    public showHiddenData(event: Event): void {
        this.preventEventPropagation(event, true);

        this.isHidden = !this.isHidden;
    }

    public callBodyAction(action: IDropDownActions): void {
        this.bodyActions.emit(action);
    }

    public clusterItemClick(item: MapDropdownClusterItem): void {
        if (item?.id) this.onClusterItemClick?.emit(item.id);
    }

    public backButtonClick(event: Event): void {
        this.preventEventPropagation(event);

        this.onBackButtonClick.emit();
    }

    public showAllDaysClick(): void {
        this.isShowAllDaysActive = !this.isShowAllDaysActive;
    }

    public onClusterListScroll(event: Event): void {
        this.preventEventPropagation(event);

        if (
            this._infoWindowContent?.clusterData &&
            this._infoWindowContent?.clusterData?.length >= 25
        ) {
            const scrollElement = document.querySelector(
                '.cluster-marker-container'
            ) as HTMLElement;

            if (
                scrollElement?.offsetHeight + scrollElement?.scrollTop >=
                scrollElement?.scrollHeight - 105
            )
                this.onClusterListScrollToEnd.emit();
        }
    }

    public preventEventPropagation(
        event: Event,
        preventDefault?: boolean
    ): void {
        if (preventDefault) event.preventDefault();
        event.stopPropagation();
    }

    public setFuelPriceData(markerData: T): void {
        const {
            pricePerGallon,
            lowestPricePerGallon,
            highestPricePerGallon,
            priceOutDated,
            defPrice,
            defLowestPrice,
            defHighestPrice,
            defPriceOutDated,
            dieselLastUsed,
        } = markerData as ILastFuelPriceProgressData;

        if (markerData)
            this.fuelPriceRangeData = {
                pricePerGallon,
                lowestPricePerGallon,
                highestPricePerGallon,
                priceOutDated,
                defPrice,
                defLowestPrice,
                defHighestPrice,
                defPriceOutDated,
                dieselLastUsed,
                isMapView: true,
            };
    }
}