import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormFieldComponent } from '../form-field/form-field-component.directive';
import { NgClass, NgIf } from '@angular/common';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { StopPropagationDirective } from '../../directives';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';

const InputTypes = {
    DATE: 'DATE',
    NUMBER: 'NUMBER',
    TEXT: 'TEXT',
    IMAGE: 'IMAGE',
} as const;

export type InputType = keyof typeof InputTypes;

type DynamicInput = number | string | Date;

@Component({
    selector: 'iqser-dynamic-input [type]',
    templateUrl: './dynamic-input.component.html',
    styleUrls: ['./dynamic-input.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: DynamicInputComponent,
        },
        {
            provide: NG_VALIDATORS,
            multi: true,
            useExisting: DynamicInputComponent,
        },
    ],
    imports: [NgClass, NgIf, FormsModule, MatDatepickerModule, StopPropagationDirective, MatIconModule, MatInputModule],
})
export class DynamicInputComponent extends FormFieldComponent<DynamicInput> {
    @Input() label?: string;
    @Input() type!: InputType;
    @Input() placeholder?: string;
    @Input() id?: string;
    @Input() name?: string;
    @Input() classList?: string = '';
    @Input() input!: DynamicInput;
    @Input() canEditInput = true;
    @Output() readonly closedDatepicker = new EventEmitter<boolean>();

    get isDate() {
        return this.type === InputTypes.DATE;
    }

    get isNumber() {
        return this.type === InputTypes.NUMBER;
    }

    get isText() {
        return this.type === InputTypes.TEXT;
    }

    writeValue(input: DynamicInput): void {
        this.input = input;
    }

    onCloseDatepicker() {
        this.closedDatepicker.emit(true);
    }

    onOpenDatepicker() {
        this.closedDatepicker.emit(false);
    }
}