import { inject, ModuleWithProviders, NgModule, Optional, Provider, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MatDialogModule } from '@angular/material/dialog';
import { CircleButtonComponent, IconButtonComponent } from './buttons';
import { DomSanitizer } from '@angular/platform-browser';
import { ICONS } from './utils/constants';
import { StopPropagationDirective } from './directives';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

const matModules = [MatIconModule, MatButtonModule, MatDialogModule, MatCheckboxModule, MatTooltipModule, MatProgressBarModule];
const components = [ConnectionStatusComponent, FullPageErrorComponent];

@NgModule({
    declarations: [...components],
    imports: [
        CommonModule,
        ...matModules,
        FormsModule,
        ReactiveFormsModule,
        TranslateModule,
        IconButtonComponent,
        CircleButtonComponent,
        StopPropagationDirective,
    ],
    exports: [...components],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            multi: true,
            useClass: ApiPathInterceptor,
        },
        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
    ],
})
export class CommonUiModule {
    constructor(@Optional() @SkipSelf() parentModule?: CommonUiModule) {
        if (parentModule) {
            throw new Error('CommonUiModule is already loaded. Import it in the AppModule only!');
        }

        const iconRegistry = inject(MatIconRegistry);
        const sanitizer = inject(DomSanitizer);

        ICONS.forEach(icon => {
            const url = sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`);
            iconRegistry.addSvgIconInNamespace('iqser', icon, url);
        });
    }

    static forRoot<
        UserPreference extends IqserUserPreferenceService,
        Config extends IqserConfigService<AppConfig>,
        AppConfig extends IqserAppConfig = IqserAppConfig,
    >(options: CommonUiOptions<UserPreference, Config, AppConfig>): ModuleWithProviders<CommonUiModule> {
        const userPreferenceService = ModuleOptions.getService(
            IqserUserPreferenceService,
            DefaultUserPreferenceService,
            options.existingUserPreferenceService,
        );

        const configServiceProviders = this._getConfigServiceProviders(options.configServiceFactory, options.configService);

        return {
            ngModule: CommonUiModule,
            providers: [userPreferenceService, ...configServiceProviders],
        };
    }

    private static _getConfigServiceProviders(configServiceFactory: () => unknown, configService?: unknown): Provider[] {
        if (configService) {
            return [
                {
                    provide: configService,
                    useFactory: configServiceFactory,
                },
                {
                    provide: IqserConfigService,
                    useExisting: configService,
                },
            ];
        }

        return [
            {
                provide: IqserConfigService,
                useFactory: configServiceFactory,
            },
        ];
    }
}