import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Renderer2,
    ViewEncapsulation,
} from '@angular/core';
import {
    AfterViewInit,
    Component,
    EventEmitter,
    Input,
    OnChanges,
    OnDestroy,
    OnInit,
    Output,
    Self,
    SimpleChanges,
    ViewChild,
} from '@angular/core';
import { CommonModule } from '@angular/common';

import { debounceTime, skip, Subject, takeUntil } from 'rxjs';

// bootstrap
import {
    NgbPopover,
    NgbPopoverModule,
    NgbModule,
} from '@ng-bootstrap/ng-bootstrap';

// animation
import { inputDropdownAnimation } from './animations';

// config
import { ICaInput } from '../ca-input/config';

// components
import { CaInputComponent } from '../ca-input/ca-input.component';
import { CaInputDropdownLoadBrokerComponent } from './components/ca-input-dropdown-load-broker/ca-input-dropdown-load-broker.component';
import { CaInputDropdownLoadDispatchesTtdComponent } from './components/ca-input-dropdown-load-dispatches-ttd/ca-input-dropdown-load-dispatches-ttd.component';
import { CaInputDropdownLoadDispatcherComponent } from './components/ca-input-dropdown-load-dispatcher/ca-input-dropdown-load-dispatcher.component';
import { CaInputDropdownSvgTemplateComponent } from './components/ca-input-dropdown-svg-template/ca-input-dropdown-svg-template.component';
import { CaInputDropdownSvgtextTemplateComponent } from './components/ca-input-dropdown-svgtext-template/ca-input-dropdown-svgtext-template.component';
import { CaInputDropdownSvgtextDispatchTemplateComponent } from './components/ca-input-dropdown-svgtext-dispatch-template/ca-input-dropdown-svgtext-dispatch-template.component';
import { CaInputDropdownGroupsComponent } from './components/ca-input-dropdown-groups/ca-input-dropdown-groups.component';
import { CaInputDropdownMultiselectComponent } from './components/ca-input-dropdown-multiselect/ca-input-dropdown-multiselect.component';
import { CaInputDropdownLabelsComponent } from './components/ca-input-dropdown-labels/ca-input-dropdown-labels.component';
import { CaInputDropdownLoadBrokerContactComponent } from './components/ca-input-dropdown-load-broker-contact/ca-input-dropdown-load-broker-contact.component';
import { CaInputDropdownLoadBrokerShipperComponent } from './components/ca-input-dropdown-load-broker-shipper/ca-input-dropdown-load-broker-shipper.component';
import { CaInputDropdownTextCounterComponent } from './components/ca-input-dropdown-text-counter/ca-input-dropdown-text-counter.component';
import { CaInputDropdownDoubleTextTemplateComponent } from './components/ca-input-dropdown-double-text-template/ca-input-dropdown-double-text-template.component';
import { CaInputDropdownTripleTextTemplateComponent } from './components/ca-input-dropdown-triple-text-template/ca-input-dropdown-triple-text-template.component';
import { CaInputDropdownDefaultTemplateComponent } from './components/ca-input-dropdown-default-template/ca-input-dropdown-default-template.component';
import { CaInputDropdownFuelFranchiseComponent } from './components/ca-input-dropdown-fuel-franchise/ca-input-dropdown-fuel-franchise.component';
import { CaInputDropdownDispatchComponent } from './components/ca-input-dropdown-dispatch/ca-input-dropdown-dispatch.component';
import { CaInputDropdownDetailsTemplateComponent } from './components/ca-input-dropdown-details-template/ca-input-dropdown-details-template.component';
import { CaInputDropdownPayrollTrucksComponent } from './components/ca-input-dropdown-payroll-trucks/ca-input-dropdown-payroll-trucks.component';
import { CaInputDropdownParkingComponent } from './components/ca-input-dropdown-parking/ca-input-dropdown-parking.component';

// pipes
import { FormControlPipe } from '../ca-input/pipes';
import { DropdownCountPipe, InputDropdownMultiselectClassPipe } from './pipes';

// modules
import { AngularSvgIconModule } from 'angular-svg-icon';

// directives
import {
    ControlValueAccessor,
    FormsModule,
    NgControl,
    ReactiveFormsModule,
} from '@angular/forms';

// models
import { CommandsEvent } from '../ca-input/models';
import { OptionModel } from './models/input-dropdown-option.model';

// services
import { ImageBase64Service } from '../../services/image-base64.service';

// svg routes
import { InputDropdownSvgRoutes } from './utils/svg-routes/input-dropdown-svg-routes';

// enums
import { DropdownStringEnum, DropdownTemplateTypeEnum } from './enums';

// helpers
import { uuidv4 } from '../../utils/helpers';

@Component({
    selector: 'app-ca-input-dropdown',
    templateUrl: './ca-input-dropdown.component.html',
    styleUrls: ['./ca-input-dropdown.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [FormControlPipe],
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations: [inputDropdownAnimation('showHideDropdownOptions')],
    imports: [
        // Module
        CommonModule,
        FormsModule,
        NgbPopoverModule,
        ReactiveFormsModule,
        NgbModule,
        AngularSvgIconModule,
        // Component
        CaInputComponent,
        CaInputDropdownSvgTemplateComponent,
        CaInputDropdownSvgtextTemplateComponent,
        CaInputDropdownSvgtextDispatchTemplateComponent,
        CaInputDropdownGroupsComponent,
        CaInputDropdownMultiselectComponent,
        CaInputDropdownLabelsComponent,
        CaInputDropdownLoadBrokerComponent,
        CaInputDropdownLoadDispatchesTtdComponent,
        CaInputDropdownLoadDispatcherComponent,
        CaInputDropdownLoadBrokerContactComponent,
        CaInputDropdownLoadBrokerShipperComponent,
        CaInputDropdownTextCounterComponent,
        CaInputDropdownDoubleTextTemplateComponent,
        CaInputDropdownTripleTextTemplateComponent,
        CaInputDropdownDefaultTemplateComponent,
        CaInputDropdownFuelFranchiseComponent,
        CaInputDropdownDispatchComponent,
        CaInputDropdownDetailsTemplateComponent,
        CaInputDropdownPayrollTrucksComponent,
        CaInputDropdownParkingComponent,
        // Pipes
        FormControlPipe,
        DropdownCountPipe,
        InputDropdownMultiselectClassPipe,
    ]
})
export class CaInputDropdownComponent
    implements OnInit, AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor
{
    @ViewChild('input') inputRef!: CaInputComponent;
    @ViewChild('t2') public popoverRef!: NgbPopover;

    // different templates for body rendering
    public _template!: string;
    _canAddNew: boolean = false;
    @Input() set template(value: string) {
        this._template = value;
        if (value === 'details-template' && this.isDetailsPages) {
            this.clearTimeoutDropdown = setTimeout(() => {
                this.inputRef.setInputCursorAtTheEnd(
                    this.inputRef.input.nativeElement
                );
                const option = this._options.find((item) => item.active);
                this._activeItem = option || null;
                this.getSuperControl?.setValue(option?.name);

                const timeout2 = setTimeout(() => {
                    this.popoverRef.open();
                    clearTimeout(timeout2);
                }, 150);
            });
        }
    }

    @Input() multiselectTemplate!: string;
    @Input() inputConfig!: ICaInput;
    @Input() set canAddNew(value: boolean) {
        this._canAddNew = value;
    } // ADD NEW item in options
    @Input() canOpenModal!: boolean; // open modal with ADD NEW button
    @Input() isAddressDropdown!: boolean; // only for address dropdown

    // sort-template for different options
    public _sort!: string;
    @Input() set sort(value: string) {
        this._sort = value;
    }

    // currently active item
    public _activeItem!: OptionModel | null;
    @Input() set activeItem(value: OptionModel | null) {
        this.inputConfig = {
            ...this.inputConfig,
            blackInput: true,
        };
        this._activeItem = value;

        // With address
        if (
            this.inputConfig.name &&
            this.inputConfig.name.toLowerCase().includes('address') &&
            this._activeItem
        ) {
            if (Object.keys(this._activeItem).length > 0) {
                this.getSuperControl?.patchValue(
                    value?.address ? value?.address : null
                );
            }

            if (!this.inputConfig.hideColorValidations) {
                this.clearTimeoutDropdown = setTimeout(() => {
                    this.inputConfig = {
                        ...this.inputConfig,
                        blackInput: false,
                    };
                    this.cdRef.detectChanges();
                }, 150);
            }
        }
        // Without address
        else {
            if (this._activeItem) {
                this.clearTimeoutDropdown = setTimeout(() => {
                    this.getSuperControl!.patchValue(
                        value?.number
                            ? value?.number
                            : value?.name
                              ? value?.name
                              : (value?.companyName ?? null)
                    );

                    if (!this.inputConfig.hideColorValidations) {
                        this.inputConfig = {
                            ...this.inputConfig,
                            blackInput: false,
                        };
                    }
                    this.cdRef.detectChanges();
                }, 150);
            }
        }
    }

    @Input() activeItemColor!: OptionModel | null; // currently active color in dropdown
    @Input() labelMode!: 'Label' | 'Color';

    // when send SVG, please premmaped object: add 'folder' | 'subfolder'
    public _options: OptionModel[] = [];
    @Input() set options(values: OptionModel[]) {
        if (values) this._options = [...values];

        switch (this._sort) {
            case 'active-drivers': {
                this._options = values.sort(
                    (x, y) => Number(y.status) - Number(x.status)
                );

                this.originalOptions = [...this._options];
                break;
            }
            default: {
                setTimeout(() => {
                    if (
                        this._canAddNew &&
                        !this._options.find((item) => item.id === 7655)
                    ) {
                        this._options.unshift({
                            id: 7655,
                            name: DropdownStringEnum.ADD_NEW,
                        });
                    }

                    this.originalOptions = this._options;
                }, 100);
                break;
            }
        }
    }

    // MultiSelect Selected Items From Backend
    @Input() set preloadMultiselectItems(values: OptionModel[]) {
        if (this.inputConfig.multiselectDropdown) {
            if (!values) {
                this.deleteAllMultiSelectItems(this.inputConfig.label);
                return;
            }

            if (values?.length) {
                values.forEach((item) => {
                    this.onMultiselectSelect(item);
                });
            }
        }
    }

    @Input() isDetailsPages!: boolean; // only for details pages
    @Input() isIncorrectValue!: boolean; // applicant review option

    @Output() selectedItem: EventEmitter<OptionModel | null> =
        new EventEmitter<OptionModel | null>();
    @Output() selectedItems: EventEmitter<OptionModel[] | null> =
        new EventEmitter<OptionModel[] | null>();
    @Output() selectedItemColor: EventEmitter<OptionModel | null> =
        new EventEmitter<OptionModel | null>();
    @Output() selectedLabelMode: EventEmitter<string> =
        new EventEmitter<string>();
    @Output() closeDropdown: EventEmitter<boolean> =
        new EventEmitter<boolean>();
    @Output() saveItem: EventEmitter<{
        data: OptionModel | null;
        action: string;
    }> = new EventEmitter<{ data: OptionModel | null; action: string }>();
    @Output() incorrectEvent: EventEmitter<boolean> =
        new EventEmitter<boolean>();
    @Output() placeholderIconEvent: EventEmitter<boolean> =
        new EventEmitter<boolean>();
    @Output('pagination') paginationEvent: EventEmitter<number> =
        new EventEmitter<number>();
    @Output('activeGroup') activeGroupEvent: EventEmitter<OptionModel> =
        new EventEmitter<OptionModel>();
    @Output('clearInputEvent') clearInputEvent: EventEmitter<boolean> =
        new EventEmitter<boolean>();

    // Copy of Options
    public originalOptions: OptionModel[] = [];

    // Pagination
    public paginationNumber: number = 0;

    // Multiselect dropdown options
    public multiselectItems: OptionModel[] = [];
    public isMultiSelectInputFocus: boolean = false;
    public multiSelectLabel!: string | undefined;
    public lastActiveMultiselectItem!: OptionModel | null;

    // Add mode
    public isInAddMode: boolean = false;

    // Dropdown navigation with keyboard
    private dropdownPosition: number = -1;

    // Dropdown Cleartimeout
    public clearTimeoutDropdown: string | number | ReturnType<typeof setTimeout> | undefined;

    public hoveringIndex!: number;
    public inputDropdownSvgRoutes = InputDropdownSvgRoutes;
    public dropdownTemplateTypeEnum = DropdownTemplateTypeEnum;

    public originalInputConfig!: ICaInput;

    // Destroy
    private destroy$ = new Subject<void>();

    constructor(
        @Self() public superControl: NgControl,
        public imageBase64Service: ImageBase64Service,
        private cdRef: ChangeDetectorRef,
        private renderer: Renderer2
    ) {
        this.superControl.valueAccessor = this;
    }

    get getSuperControl() {
        return this.superControl.control;
    }

    writeValue(_: any): void {}

    registerOnChange(_: any): void {}

    registerOnTouched(_: any): void {}

    ngOnInit(): void {
        // Multiselect
        if (this.inputConfig.multiselectDropdown) {
            this.multiSelectLabel = this.inputConfig.label;
        }

        // Search
        this.getSuperControl!.valueChanges.pipe(
            debounceTime(50),
            takeUntil(this.destroy$),
            skip(1)
        ).subscribe((searchText) => {
            if (this.labelMode === 'Color') {
                return;
            }
            this.search(searchText);
        });

        this.originalInputConfig = structuredClone(this.inputConfig);
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes['options'] && changes['options'].currentValue) {
            this.originalOptions = changes['options'].currentValue;
        }
    }

    ngAfterViewInit() {
        if (this.inputConfig.autoFocus) {
            this.clearTimeoutDropdown = setTimeout(() => {
                this.popoverRef.open();
            }, 450);
        }
    }

    public onScrollDropdown(event: EventTarget | null) {
        const target = event as HTMLElement;

        if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
            this.paginationNumber += 1;

            this.paginationEvent.emit(this.paginationNumber);
        }
    }

    public onActiveItem(option: OptionModel, group?: any): void {
        // Prevent user to pick franchise, without group
        if (
            this._template === 'fuel-franchise' &&
            option?.isFranchise &&
            !group
        ) {
            return;
        }
        // Disable to picking banned or dnu user
        if (option?.dnu || option?.ban) {
            return;
        }
        // No Result
        if (option.id === 7654 || option.id === 7656) {
            return;
        }
        // ADD NEW
        else if (option.id === 7655) {
            // Open New Modal
            if (this.canOpenModal) {
                this.selectedItem.emit({ ...option, canOpenModal: true });
            }
            // Work with current modal
            else {
                // DropDown label
                if (this.inputConfig.dropdownLabel) {
                    this.inputConfig.dropdownLabelNew = true;
                    this.inputRef.isEditInput = true;
                    this.selectedLabelMode.emit('Color');
                    this.inputConfig.commands!.active = true;
                    this.inputRef.setInputCursorAtTheEnd(
                        this.inputRef.input.nativeElement
                    );
                    this.selectedItem.emit(option);
                }
                // Normal Dropdown
                else {
                    this.addNewConfig();
                }
            }
        }
        // Pick the item
        else {
            this.inputConfig.selectedDropdown = true;
            // Dropdown labels option selected
            if (this.inputConfig.dropdownLabel) {
                if (this.labelMode === 'Label') {
                    this._activeItem = option;
                    this.getSuperControl?.setValue(option.name);
                    this._options = this.originalOptions;
                    this.selectedItem.emit(option);
                }

                if (this.labelMode === 'Color') {
                    this.activeItemColor = option;

                    this.selectedItemColor.emit(this.activeItemColor);
                }
            }
            // Normal Dropdown option selected
            else {
                this._activeItem = option;

                this._options = this.originalOptions;

                if (this.inputConfig.name !== 'RoutingAddress') {
                    this.getSuperControl?.patchValue(
                        option?.number ? option.number : option.name
                    );

                    if (this._template === 'fuel-franchise') {
                        this.getSuperControl!.patchValue(
                            group ? option.name : option.businessName
                        );
                        const { id } = option;
                        group
                            ? this.selectedItem.emit({
                                  ...option,
                                  ...group,
                                  storeId: id,
                              })
                            : this.selectedItem.emit(option);
                    } else {
                        group
                            ? this.selectedItem.emit({
                                  ...option,
                                  ...group,
                              })
                            : this.selectedItem.emit(option);
                    }
                }
            }
            this.getSuperControl?.markAsDirty();

            this.popoverRef.close();
        }

        if (this._template === 'fuel-franchise') {
            this.clearTimeoutDropdown = setTimeout(() => {
                this.popoverRef.close();
            }, 100);
        }
    }

    public onActiveItemGroup(event: { option: OptionModel; group: any }) {
        this.onActiveItem(event.option, event.group);
    }

    public onClearSearch(): void {
        this._options = this.originalOptions;
        this._activeItem = null;
        this.inputConfig.selectedDropdown = false;
        this.getSuperControl?.patchValue(null);
        this.inputConfig = {
            ...this.inputConfig,
            placeholder: this.inputConfig.placeholderWithLabel
                ? this.originalInputConfig.placeholder
                : '',
            dropdownImageInput: null,
        };
        this.selectedItem.emit(null);
    }

    public clearDropdownLabel() {
        this._activeItem = null;
        this.activeItemColor = null;
        this.selectedItem.emit(null);
        this.selectedItemColor.emit(null);
        this.selectedLabelMode.emit('Label');
    }

    public commandEvent(event: CommandsEvent) {
        if (event.action === 'Edit Input') {
            this.selectedLabelMode.emit('Color');
            this.inputConfig.dropdownLabelNew = false;
        }
        if (event.action === 'Toggle Dropdown') {
            this.popoverRef.toggle();
        }
        if (event.action === 'confirm' && event.mode === 'new') {
            this.addNewItem();
        }

        if (event.action === 'confirm' && event.mode === 'edit') {
            this.updateItem();
        }

        if (event.action === 'Placeholder Icon Event') {
            this.placeholderIconEvent.emit(true);
        }

        if (event.action === 'cancel') {
            this.saveItem.emit({
                data: this._activeItem,
                action: 'cancel',
            });
            this.selectedLabelMode.emit('Label');
        }
    }

    public addNewItem(): void {
        this._activeItem = {
            id: parseInt(uuidv4()),
            name: this.getSuperControl!.value,
        };
        this.inputConfig.commands!.active = false;
        this.inputRef.isVisibleCommands = false;
        this.inputRef.isFocusInput = false;

        this.saveItem.emit({ data: this._activeItem, action: 'new' });

        if (this.inputConfig.dropdownLabel) {
            this.selectedLabelMode.emit('Label');
            this.inputRef.isTouchedInput = true;
        }
    }

    public updateItem(): void {
        if (this.inputConfig.dropdownLabel) {
            this._activeItem = {
                ...this._activeItem,
                name: this.getSuperControl?.value,
                colorId: this.activeItemColor
                    ? this.activeItemColor.id
                    : this._activeItem?.colorId,
                color: this.activeItemColor
                    ? this.activeItemColor.name
                    : this._activeItem?.color,
                code: this.activeItemColor
                    ? this.activeItemColor.code
                    : this._activeItem?.code,
            };

            this.selectedLabelMode.emit('Label');
        } else {
            this._activeItem = {
                ...this._activeItem,
                name: this.getSuperControl?.value,
            };
        }

        this.saveItem.emit({
            data: this._activeItem,
            action: 'edit',
        });
    }

    public addNewConfig() {
        this.inputConfig = {
            ...this.inputConfig,
            commands: {
                active: true,
                type: 'confirm-cancel',
                firstCommand: {
                    popup: {
                        name: 'Confirm',
                        backgroundColor: '#3074d3',
                    },
                    name: 'confirm',
                    svg: InputDropdownSvgRoutes.specConfirmSvg,
                },
                secondCommand: {
                    popup: {
                        name: 'Cancel',
                        backgroundColor: '#2f2f2f',
                    },
                    name: 'cancel',
                    svg: InputDropdownSvgRoutes.xClearSvg,
                },
            },
            placeholder: '',
        };

        this.popoverRef.close();

        this.isInAddMode = true;
        this.clearTimeoutDropdown = setTimeout(() => {
            this.isInAddMode = false;
        }, 200);
    }

    public onIncorrectInput(event: boolean) {
        this.incorrectEvent.emit(event);
    }

    public identity(index: number, item: OptionModel): number | undefined {
        return item.id;
    }

    public toggleNestedList(option: OptionModel): void {
        if (option.open) {
            option.open = false;
            return;
        }
        this._options.filter((item) => (item.open = false));

        option.open = !option.open;

        if (option.open) {
            this.activeGroupEvent.emit(option);
        }
    }

    public onBlurInput(event: boolean) {
        this.closeDropdown.emit(event);
    }

    public onClearInputEvent(event: boolean) {
        this.clearInputEvent.emit(event);

        if (event) {
            this.popoverRef.close();
            // label dropdown
            if (this.inputConfig.dropdownLabel) {
                this.clearDropdownLabel();
            }
            // normal dropdown
            else {
                this.onClearSearch();
            }
        }
    }

    public showHideDropdown(action: boolean) {
        if (this.inputConfig.multiselectDropdown) {
            this.isMultiSelectInputFocus = action;
        }

        if (this.labelMode !== 'Color') {
            // Focus Out
            if (!action) {
                if (this._template !== 'fuel-franchise') {
                    this.popoverRef.open();
                }

                // Prevent user to typing dummmy data if _activeItem doesn't exist
                if (this._activeItem) {
                    this.getSuperControl!.setValue(this._activeItem.name);
                } else {
                    const index = this.originalOptions.findIndex(
                        (item) => item.name === this.getSuperControl!.value
                    );

                    if (index === -1) {
                        this.onClearSearch();
                    }
                }
                if (this._template !== 'fuel-franchise') {
                    this.popoverRef.close();
                }
            }
            // Focus In
            else {
                this.inputConfig = {
                    ...this.inputConfig,
                    placeholder: this.getSuperControl!.value
                        ? this.getSuperControl!.value
                        : this.inputConfig.placeholderWithLabel
                          ? this.originalInputConfig.placeholder
                          : this._activeItem?.name,
                };

                this.getSuperControl!.setValue(null);

                if (this.popoverRef) {
                    this.popoverRef.close();
                }

                if (this.isInAddMode) {
                    this.inputConfig = {
                        ...this.inputConfig,
                        placeholder: '',
                    };
                }
            }
        }

        // Details pages
        if (
            this.inputConfig.customClass?.includes('details-pages') &&
            !action
        ) {
            this.selectedItem.emit(this._activeItem);
        }
    }

    public dropDownKeyNavigation({
        keyCode,
        data,
    }: {
        keyCode: number;
        data: any;
    }) {
        // Navigate down
        if (keyCode === 40) {
            this.dropdownNavigation(1);
        }
        // Navigate up
        if (keyCode === 38) {
            this.dropdownNavigation(-1);
        }

        // Press Escape
        if (keyCode === 27) {
            if (this.inputConfig?.commands?.active) {
                this.inputConfig.commands = undefined;
                this.inputRef.isVisibleCommands = false;
                this.inputRef.isFocusInput = false;
            }

            if (this.inputConfig.dropdownLabel) {
                this.getSuperControl?.setErrors(null);
                this.inputConfig.dropdownLabelNew = false;
                this.inputConfig.commands!.active = false;
                if (!this.inputConfig.hideColorValidations) {
                    this.inputConfig.blackInput = false;
                }
                this.inputRef.isFocusInput = false;
                this.inputRef.isEditInput = false;
                this.inputRef.input.nativeElement.blur();
                if (this.labelMode === 'Color') {
                    this.getSuperControl!.patchValue(null);
                    this.selectedLabelMode.emit('Label');
                }
            }
        }
        // Press 'enter'
        if (keyCode === 13) {
            let selectedItem = this.renderer.selectRootElement(
                '.dropdown-option-hovered',
                true
            );

            // // Open New Modal
            if (this.canOpenModal && selectedItem.toLowerCase() === 'add new') {
                this.selectedItem.emit({
                    id: 7655,
                    name: DropdownStringEnum.ADD_NEW,
                    canOpenModal: true,
                });
            } else {
                if (this._options.length === 1 && !selectedItem) {
                    if (this._template === 'fuel-franchise') {
                        selectedItem = this._options[0]?.businessName
                            ? this._options[0]?.businessName
                            : this._options[0]?.name || '';
                    } else {
                        selectedItem = this._options[0]?.number
                            ? this._options[0]?.number.toString().trim()
                            : this._options[0].name?.toString().trim();
                    }
                }

                this.pickupElementWithKeyboard(selectedItem, data);
            }
        }

        if (keyCode === 9) {
            if (
                this._options.length === 1 &&
                this._options[0].id !== 7655 &&
                this._options[0].id !== 7654
            ) {
                let selectedItem = null;

                if (this._template === 'fuel-franchise') {
                    selectedItem = this._options[0]?.businessName
                        ? this._options[0]?.businessName
                        : this._options[0]?.name;
                } else {
                    selectedItem = this._options[0]?.number
                        ? this._options[0]?.number.toString().trim()
                        : this._options[0].name!.toString().trim();
                }

                this.pickupElementWithKeyboard(selectedItem, data);
            } else {
                this.popoverRef.open();
            }
        }
    }

    // ----------------------------------  Multiselect Dropdown ----------------------------------
    public onMultiselectSelect(option: OptionModel): void {
        this.isMultiSelectInputFocus = false;
        this.inputConfig.label = undefined;

        if (this.multiselectItems.some((item) => item.id === option.id)) {
            return;
        }

        this._options = this._options.map((item) => {
            if (item.id === option.id) {
                return {
                    ...item,
                    active: true,
                };
            } else {
                if (!item.active) {
                    return {
                        ...item,
                        active: false,
                    };
                } else {
                    return {
                        ...item,
                        active: true,
                    };
                }
            }
        });

        this.multiselectItems = this._options.filter((item) => item.active);

        this.selectedItems.emit(this.multiselectItems);

        this._options = this._options.sort(
            (x, y) => Number(y.active) - Number(x.active)
        );
        this.originalOptions = [...this._options];

        this.lastActiveMultiselectItem = this._options
            .filter((item) => item.active)
            .slice(-1)[0];

        if (this.inputRef) {
            this.inputRef.isFocusInput = false;
            this.inputRef.input.nativeElement.blur();
        }

        this.inputConfig = {
            ...this.inputConfig,
            multiSelectDropdownActive: true,
        };
    }

    public removeMultiSelectItem(index: number) {
        this._options = this.originalOptions.map((item) => {
            if (item.id === this.multiselectItems[index].id) {
                return {
                    ...this.multiselectItems[index],
                    active: false,
                };
            }
            return item;
        });

        this._options = this._options.sort(
            (x, y) => Number(y.active) - Number(x.active)
        );

        this.originalOptions = this._options;
        this.multiselectItems.splice(index, 1);

        if (!this.multiselectItems.length) {
            this.inputConfig = {
                ...this.inputConfig,
                multiSelectDropdownActive: undefined,
            };

            this.lastActiveMultiselectItem = null;
            this.inputConfig.label = this.multiSelectLabel;
        } else {
            this.lastActiveMultiselectItem = this._options
                .filter((item) => item.active)
                .slice(-1)[0];
        }

        this.selectedItems.emit(
            this.multiselectItems.map((item) => {
                return { ...item };
            })
        );
    }

    public deleteAllMultiSelectItems(currentLabel?: string) {
        this.multiselectItems = [];
        this.inputConfig = {
            ...this.inputConfig,
            multiSelectDropdownActive: undefined,
        };

        this.inputConfig.label = currentLabel
            ? currentLabel
            : this.multiSelectLabel;
        this._options = this._options.map((item) => {
            return {
                ...item,
                active: false,
            };
        });
        this.originalOptions = this._options;
        this.selectedItems.emit(null);

        this.lastActiveMultiselectItem = null;
    }

    public toggleMultiselectDropdown() {
        if (this.inputConfig.isDisabled) {
            return;
        }
        this.isMultiSelectInputFocus = !this.isMultiSelectInputFocus;

        if (this.isMultiSelectInputFocus) {
            this.inputRef.setInputCursorAtTheEnd(
                this.inputRef.input.nativeElement
            );

            this.clearTimeoutDropdown = setTimeout(() => {
                this.popoverRef.open();
            }, 150);
        } else {
            this.inputRef.isFocusInput = false;
            this.popoverRef.close();
        }
    }
    // ----------------------------------  End ----------------------------------

    private pickupElementWithKeyboard(
        selectedItem: string | undefined,
        data: any
    ) {
        // Address Select
        if (
            (this.inputConfig.name == 'Address' ||
                this.inputConfig.name == 'RoutingAddress') &&
            (!selectedItem || selectedItem == '')
        ) {
            selectedItem = this._options[0].name;
        }

        // Input Dropdown Bank Name
        if (
            !selectedItem &&
            this.inputConfig.name === 'Input Dropdown Bank Name'
        ) {
            this.addNewItem();
        }

        // Input Dropdown Label
        if (!selectedItem && this.inputConfig.dropdownLabel) {
            this.commandEvent({
                data: this.getSuperControl!.value,
                action: 'confirm',
                mode: data.dropdownLabelNew ? 'new' : 'edit',
            });
            this.clearTimeoutDropdown = setTimeout(() => {
                this.getSuperControl!.setErrors(null);
                this.inputConfig.dropdownLabelNew = false;
                this.inputConfig.commands!.active = false;
                if (!this.inputConfig.hideColorValidations) {
                    this.inputConfig.blackInput = false;
                }
                this.inputRef.isFocusInput = false;
                this.inputRef.isEditInput = false;
                this.inputRef.input.nativeElement.blur();
            }, 150);
        }

        // ADD NEW Option
        if (selectedItem === DropdownStringEnum.ADD_NEW) {
            this.addNewConfig();

            if (this.inputConfig.dropdownLabel) {
                // DropDown label
                if (this.inputConfig.dropdownLabel) {
                    this.inputConfig.dropdownLabelNew = true;
                    this.inputRef.isEditInput = true;
                    this.selectedLabelMode.emit('Color');
                    this.inputConfig.commands!.active = true;
                    this.inputRef.setInputCursorAtTheEnd(
                        this.inputRef.input.nativeElement
                    );
                    this.inputConfig.blackInput = true;
                    this.selectedItem.emit({
                        id: 7655,
                        name: DropdownStringEnum.ADD_NEW,
                    });
                }
            }
            selectedItem = undefined;
        }
        // Normal Pick Dropdown
        else {
            const existItem = this._options
                .map((item) => {
                    // Address
                    if (
                        item.name &&
                        (this.inputConfig.name == 'Address' ||
                            this.inputConfig.name == 'RoutingAddress')
                    ) {
                        return {
                            id: item.id,
                            name: item.name,
                            address: item.address,
                            longLat: item.longLat,
                        };
                    }

                    // Load Dispatches TTD
                    else if (
                        [
                            'load-dispatches-ttd',
                            'load-broker',
                            'load-shipper',
                        ].includes(this._template)
                    ) {
                        return { ...item };
                    }

                    // Image (must be before type code, because color has same prop like other dropdown pop)
                    else if (item.logoName) {
                        return { ...item };
                    }

                    // Code
                    else if (item.code && item.description) {
                        return {
                            id: item.id,
                            name: item.code.concat(' - ', item.description),
                        };
                    }
                    // Dropdown Labels
                    else if (
                        item?.dropLabel ||
                        this.inputConfig.dropdownLabel
                    ) {
                        return { ...item };
                    }
                    // Default
                    else {
                        if (item.name) {
                            return {
                                id: item.id,
                                name: item.name,
                            };
                        }
                    }
                    return { ...item };
                })
                .find((item) => {
                    // Dropdown Label
                    if (
                        (item?.dropLabel || this.inputConfig.dropdownLabel) &&
                        selectedItem!.substring(
                            0,
                            selectedItem!.lastIndexOf(' ')
                        ) === item?.name!.toLowerCase()
                    ) {
                        return item;
                    }

                    // Dropdown Load Dispatcher, Broker
                    if (item?.name)
                        if (
                            [
                                'load-broker',
                                'load-dispatcher',
                                'load-shipper',
                            ].includes(this._template) &&
                            selectedItem
                                ?.toLowerCase()
                                .includes(item?.name?.toLowerCase())
                        ) {
                            return item;
                        }
                    // Dropdown Load Dispatches
                    if (
                        item?.trailer?.trailerNumber &&
                        item?.truck?.truckNumber &&
                        item?.driver?.firstName &&
                        item?.driver?.lastName
                    )
                        if (
                            this._template === 'load-dispatches-ttd' &&
                            selectedItem
                                ?.toLowerCase()
                                .includes(
                                    item?.trailer?.trailerNumber.toLowerCase()
                                ) &&
                            selectedItem
                                ?.toLowerCase()
                                .includes(
                                    item?.truck?.truckNumber.toLowerCase()
                                ) &&
                            selectedItem
                                ?.toLowerCase()
                                .includes(
                                    item?.driver?.firstName
                                        .concat(' ', item?.driver?.lastName)
                                        .toLowerCase()
                                )
                        ) {
                            return item;
                        }

                    // Default
                    if (
                        !this.inputConfig.dropdownLabel &&
                        this._template !== 'load-dispatches-ttd' &&
                        selectedItem?.toLowerCase() ===
                            item?.name!.toLowerCase()
                    ) {
                        return item;
                    }
                    return item;
                }) as OptionModel;

            // MultiSelect Dropdown
            if (this.inputConfig.multiselectDropdown) {
                this.onMultiselectSelect(existItem);
            }

            // Dropdown labels option selected
            if (this.inputConfig.dropdownLabel) {
                if (this.labelMode === 'Label') {
                    this._activeItem = existItem || null;
                    this.getSuperControl!.setValue(existItem!.name);
                    this._options = this.originalOptions;
                    this.selectedItem.emit(existItem);
                    this.inputRef.isDropdownToggler = false;
                    this.inputRef.isFocusInput = false;
                    this.inputRef.input.nativeElement.blur();
                }

                if (this.labelMode === 'Color') {
                    this.activeItemColor = existItem || null;

                    this.selectedItemColor.emit(this.activeItemColor);
                }
            }
            // Normal
            else {
                this.getSuperControl!.setValue(existItem?.name);
                this.selectedItem.emit(existItem);
                this._activeItem = existItem || null;
                this.inputRef.isFocusInput = false;
                this.inputRef.input.nativeElement.blur();
            }
            this.popoverRef.close();
        }
    }

    private search(searchText: string): void {
        // Single Dropdown
        if (
            ![
                'groups',
                'load-broker-contact',
                'fuel-franchise',
                'load-dispatches-ttd',
            ].includes(this._template)
        ) {
            if (
                searchText?.length &&
                this.getSuperControl?.value &&
                this._activeItem?.name !== this.getSuperControl?.value
            ) {
                this._options = this.originalOptions.filter((item) => {
                    if (item.name === DropdownStringEnum.ADD_NEW) return true;
                    return item.name
                        ? item.name
                              .toLowerCase()
                              .includes(searchText.toLowerCase())
                        : item.code
                          ? item.code
                                .concat(' - ', item.description!)
                                .toLowerCase()
                                .includes(searchText.toLowerCase())
                          : searchText.toLowerCase();
                });

                if (
                    this._template !==
                        this.dropdownTemplateTypeEnum
                            .SVGTEXT_DISPATCH_TEMPLATE &&
                    !this.isAddressDropdown
                ) {
                    if (!this._options.length) {
                        this.getSuperControl!.setErrors({ invalid: true });
                        this.inputConfig.isInvalidSearchInDropdown = true;
                    } else {
                        this.getSuperControl!.setErrors(null);
                        this.inputConfig.isInvalidSearchInDropdown = false;
                    }
                }

                if (
                    ['truck', 'trailer'].includes(
                        this.inputConfig?.dropdownImageInput?.template!
                    )
                ) {
                    this.inputConfig = {
                        ...this.inputConfig,
                        dropdownImageInput: {
                            ...this.inputConfig.dropdownImageInput!,
                            remove: true,
                        },
                    };
                }

                const emptyOptionsWihAddNew =
                    this._options.length === 1 &&
                    this._options[0].name === DropdownStringEnum.ADD_NEW;

                if (!this._options.length || emptyOptionsWihAddNew) {
                    if (
                        this._template === 'svgtext-dispatch-template' &&
                        !this.inputConfig.isDispatchLocationDropdown &&
                        !emptyOptionsWihAddNew
                    ) {
                        this._options.push({
                            id: 7655,
                            name: DropdownStringEnum.ADD_NEW,
                        });
                    }

                    this._options.push({
                        id: 7654,
                        name: DropdownStringEnum.NO_RESULTS,
                    });
                    this.inputConfig = {
                        ...this.inputConfig,
                        hideAllItemsInInputDropdown: true,
                    };
                    if (
                        (this.inputConfig.name === 'Address' ||
                            this.inputConfig.name === 'RoutingAddress') &&
                        this.inputRef.isFocusInput
                    ) {
                        this.popoverRef?.open();
                    }
                }
            } else {
                this._options = this.originalOptions;
                if (
                    ['truck', 'trailer'].includes(
                        this.inputConfig?.dropdownImageInput?.template!
                    )
                ) {
                    this.inputConfig = {
                        ...this.inputConfig,
                        dropdownImageInput: {
                            ...this.inputConfig?.dropdownImageInput!,
                            remove: false,
                        },
                    };
                }

                this.inputConfig = {
                    ...this.inputConfig,
                    hideAllItemsInInputDropdown: false,
                };
            }
        }
        // Group Dropdown Items
        else {
            if (
                searchText?.length &&
                this.getSuperControl?.value?.toLowerCase()
            ) {
                if (this._template === 'groups') {
                    this._options = this.originalOptions
                        .map((element) => {
                            const filteredGroups = element.groups!.filter(
                                (subElement) =>
                                    subElement?.name
                                        ?.toLowerCase()
                                        .includes(searchText.toLowerCase())
                            );
                            return {
                                ...element,
                                groups: filteredGroups,
                                items: filteredGroups,
                            };
                        })
                        .filter((item) => item.groups.length);

                    if (!this._options.length) {
                        this._options.push({
                            items: [
                                {
                                    id: 7654,
                                    name: DropdownStringEnum.NO_RESULTS,
                                },
                            ],
                            groups: [
                                {
                                    id: 7654,
                                    name: DropdownStringEnum.NO_RESULTS,
                                },
                            ],
                        });
                    }
                }

                if (this._template === 'load-broker-contact') {
                    this._options = this.originalOptions.map((element) => {
                        return {
                            ...element,
                            contacts: element?.contacts?.filter(
                                (subElement) => {
                                    return subElement
                                        ?.fullName!.toLowerCase()
                                        .includes(searchText?.toLowerCase());
                                }
                            ),
                        };
                    });
                }

                if (this._template === 'fuel-franchise') {
                    this._options = this.originalOptions.map((element) => {
                        return {
                            ...element,
                            stores: element?.stores?.filter((subElement) =>
                                subElement
                                    .name!.toString()
                                    .toLowerCase()
                                    .includes(searchText.toLowerCase())
                            ),
                        };
                    });
                }

                if (this._template === 'load-dispatches-ttd') {
                    this._options = this.originalOptions.filter((item) => {
                        if (
                            item.fullName
                                ?.toLowerCase()
                                .includes(searchText.toLowerCase())
                        ) {
                            return item;
                        }

                        return false;
                    });

                    if (!this._options.length) {
                        this._options.push({
                            id: 7654,
                            name: DropdownStringEnum.NO_RESULTS,
                        });
                    }
                }
            } else {
                this._options = this.originalOptions;
            }
        }
    }

    /**
     * Navigate through dropdown with keyboard arrows
     */
    private dropdownNavigation(step: number) {
        this.dropdownPosition += step;

        if (this.dropdownPosition > this._options.length - 1) {
            this.dropdownPosition = 0;
        }

        if (this.dropdownPosition < 0) {
            this.dropdownPosition = this._options.length - 1;
        }

        let cssClass = 'dropdown-option-hovered';
        let dropdownContainer = this.renderer.selectRootElement(
            '.dropdown-options',
            true
        );

        let dropdownOption = this.renderer.selectRootElement(
            '.dropdown-option',
            true
        );

        let elOffset =
            dropdownOption.height()! * this.dropdownPosition +
            (this.dropdownPosition !== 0 ? this.dropdownPosition * 6 : 0);

        let viewport =
            dropdownContainer.scrollTop()! + dropdownContainer.height()!;

        if (
            elOffset < dropdownContainer.scrollTop()! ||
            elOffset + dropdownOption.height()! > viewport
        )
            dropdownContainer.scrollTop(elOffset);

        dropdownOption
            .removeClass(cssClass)
            .eq(this.dropdownPosition)
            .addClass(cssClass);
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
        clearTimeout(this.clearTimeoutDropdown as ReturnType<typeof setTimeout>);
    }
}