import {
    Component,
    EventEmitter,
    Input,
    Output,
    Self,
    Optional,
    ChangeDetectorRef,
    Renderer2,
} from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// enums
import { eColor, eGeneralActions } from '../../enums';

// interfaces
import { IColumnCheckAction } from './interfaces';

// components
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';

// svg routes
import { CheckboxSvgRoutes } from './utils/svg-routes';

@Component({
    selector: 'app-ca-checkbox',
    templateUrl: './ca-checkbox.component.html',
    styleUrls: ['./ca-checkbox.component.scss'],
    imports: [
        // modules
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        AngularSvgIconModule,
        NgbModule,

        // components
        CaAppTooltipV2Component,
    ],
})
export class CaCheckboxComponent implements ControlValueAccessor {
    @Input() label: string = '';
    @Input() required: boolean = false;
    @Input() disabled?: boolean = false;
    @Input() disabledStillCheckMark: boolean = false;
    @Input() svg: string = '';
    @Input() name: string = 'ca-checkbox';
    @Input() customClass: string = '';
    @Input() svgCustomClass: string = '';
    @Input() moveIconDown: boolean = false;
    @Input() isUseCarrieraACHCheckBox: boolean = false;
    @Input() isDisabledBlue: boolean = false;
    @Input() isDisabledRegularCheck: boolean = false;
    @Input() isLabelDisabled: boolean = false;
    @Input() isRegularCheckbox: boolean = true;
    @Input() isChecked?: boolean = false;
    @Input() isGroupPartialyChecked: boolean = false;
    @Input() isBlackLabelCheckbox: boolean = false;
    @Input() isModalCheckbox: boolean = false;
    @Input() isMarginTopReset: boolean = false;
    @Input() groupIndex: number = -1;
    @Input() itemIndex: number = -1;
    @Input() isDarkBackgroundCheckbox: boolean = false;

    @Output() formArrayAction: EventEmitter<boolean> =
        new EventEmitter<boolean>();
    @Output() columnCheckAction: EventEmitter<IColumnCheckAction> =
        new EventEmitter<IColumnCheckAction>();

    public isInputChecked: boolean = false;

    public checkboxSvgRoutes = CheckboxSvgRoutes;
    public eGeneralActions = eGeneralActions;
    public eColor = eColor;

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

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

    ngAfterViewInit(): void {
        // Initialize checkbox state based on formControl value or isChecked input
        if (this.isRegularCheckbox) {
            this.isInputChecked = this.getSuperControl?.value ?? false;
        } else {
            this.isInputChecked = this.isChecked ?? false;
        }
        this.cdRef?.detectChanges();
    }

    private onChangeCallback: (value: boolean) => void = () => {};

    private onTouchedCallback: () => void = () => {};

    public writeValue(obj: any): void {
        if (obj !== undefined && obj !== null) {
            this.isInputChecked = obj;
            if (this.isRegularCheckbox) {
                this.isChecked = obj;
            }
            this.cdRef?.markForCheck();
        }
    }

    public registerOnChange(fn: any): void {
        this.onChangeCallback = fn;
    }

    public registerOnTouched(fn: any): void {
        this.onTouchedCallback = fn;
    }

    public setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }

    public onChange(event: Event): void {
        event.stopPropagation();

        const newValue = (event.target as HTMLInputElement).checked;

        this.isInputChecked = newValue;

        // Call the formControl callback
        this.onChangeCallback(newValue);
        this.onTouchedCallback();

        if (!this.isRegularCheckbox) {
            this.isChecked = newValue;
            const columnAction: IColumnCheckAction = {
                isChecked: this.isChecked,
                name: this.label,
                groupIndex: this.groupIndex,
                itemIndex: this.itemIndex,
            };
            this.columnCheckAction.emit(columnAction);
        } else {
            // For regular checkboxes, also update isChecked and emit formArrayAction
            this.isChecked = newValue;
            this.formArrayAction.emit(newValue);
        }
    }

    public onHandleClick(event?: MouseEvent, fromCheckboxArea = false): void {
        const shouldHandle = fromCheckboxArea
            ? !this.isRegularCheckbox
            : this.isRegularCheckbox;
        if (!shouldHandle || this.isLabelDisabled || this.disabled) return;

        event?.preventDefault();
        event?.stopPropagation();

        const current = this.isRegularCheckbox
            ? (this.getSuperControl?.value ?? this.isInputChecked ?? false)
            : (this.isChecked ?? this.isInputChecked ?? false);
        const next = !current;

        this.isInputChecked = next;
        this.isChecked = next;
        this.onChangeCallback(next);
        this.onTouchedCallback();

        const columnAction: IColumnCheckAction = {
            isChecked: this.isChecked!,
            name: this.label,
            groupIndex: this.groupIndex,
            itemIndex: this.itemIndex,
        };

        if (this.isRegularCheckbox) {
            this.formArrayAction.emit(next);
        } else {
            this.columnCheckAction.emit(columnAction);
        }
        this.cdRef?.markForCheck();
    }
}