import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';

// models
import { SelectedStatus } from '../ca-input-dropdown/models/load-modal-status.model';

// pipes
import { StatusTextClassPipe } from './pipes/status-text.pipe';
import { LoadStatusColorsPipe } from '../../pipes/load-status-colors.pipe';
import { DispatchStatusColorsPipe } from "../../pipes/dispatch-status-colors.pipe";

@Component({
    selector: 'app-ca-load-status',
    templateUrl: './ca-load-status.component.html',
    styleUrls: ['./ca-load-status.component.scss'],
    imports: [
    CommonModule,
    // pipes
    StatusTextClassPipe,
    LoadStatusColorsPipe,
    DispatchStatusColorsPipe
],
})
export class CaLoadStatusComponent implements OnInit {
    @ViewChild('containerLoadStatus')
    containerLoadStatus!: ElementRef;

    @Input() set status(value: SelectedStatus) {
        this._status = value;
        this.generateDisplayString();
    }

    @Input() set isRowHover(value: boolean) {
        this.onRowHover(value);
    }

    @Input() time!: string;
    @Input() isNoStyle!: boolean;
    @Input() fontSize!: number;
    @Input() width!: number;
    @Input() height!: number;
    @Input() isTitleCardDropdown!: boolean;
    @Input() isDark!: boolean;
    @Input() isMarked!: boolean;
    @Input() isDropdownStatusChange!: boolean;
    @Input() isDefaultHoverFocus!: boolean;
    @Input() isNoStatesColor!: boolean;
    @Input() isStatusCard!: boolean;
    @Input() isTableBigStatus!: boolean;
    @Input() isDisabledClick!: boolean;
    @Input() isSelectedItem!: boolean;
    @Input() isFilter!: boolean;
    @Input() isDispatchStatus!: boolean;
    @Input() dispatchTime!: string;
    @Input() isDispatchShowTimeAlways!: boolean;

    public _status!: SelectedStatus;
    public displayString: string[] = [];

    public isStatusFocused!: boolean;

    constructor() {}

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

    private generateDisplayString(): void {
        this.displayString = this._status?.name?.split(' ') as string[];
    }

    public focusOnClick(): void {
        this.containerLoadStatus.nativeElement.focus();
    }

    public onStatusFocus(): void {
        this.isStatusFocused = true;
    }

    public onStatusBlur(): void {
        this.isStatusFocused = false;
    }

    private onRowHover(value: boolean): void {
        if (this.containerLoadStatus?.nativeElement)
            value
                ? this.containerLoadStatus.nativeElement.classList.add('hover')
                : this.containerLoadStatus.nativeElement.classList.remove(
                      'hover'
                  );
    }
}