import { AfterViewInit, Component, ElementRef, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { Calendar, CircleAlert } from 'lucide-angular';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
    selector: 'kit-datepicker',
    templateUrl: './datepicker.component.html',
    styleUrls: ['../styles/index.scss'],

})
export class DatePickerComponent implements AfterViewInit {
    @Input() control: AbstractControl | any;
    @Input() placeholdertext: string = '';
    @Input() minDate?: Date | any;
    @Input() maxDate?: Date | any;
    @Input() label: string = '';
    @Input() messageErrorCustom?: string = '';
    @Input() descriptionTooltip: string = '';
    @Input() monthOnly: boolean = false;
    readonly calendarI = Calendar;
    readonly infoCircle = CircleAlert;

    constructor(private readonly el: ElementRef) {}

    ngAfterViewInit(): void {
        if (this.monthOnly && this.control?.value) {
            this.applyMonthDisplay(this.control.value);
        }
    }

    isControlRequired(): boolean {
        if(this.control && this.control.validator) {
            const validator = this.control.validator({} as any);
            return !!(validator && validator.required);
        }
        return false;
    }

    onMonthSelected(date: Date, picker: MatDatepicker<Date>): void {
        if (this.monthOnly) {
            this.control.setValue(date);
            picker.close();
            setTimeout(() => this.applyMonthDisplay(date));
        }
    }

    private applyMonthDisplay(date: Date): void {
        const input = this.el.nativeElement.querySelector('input');
        if (input) {
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();
            input.value = `${month}/${year}`;
        }
    }
}