import { CommonModule } from '@angular/common';
import { importProvidersFrom } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {
    Meta,
    moduleMetadata,
    StoryObj,
    applicationConfig,
} from '@storybook/angular';

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

// components
import { CaSearchMultipleStates2Component } from './ca-search-multiple-states-2.component';
import { CaInputComponent } from '../ca-input/ca-input.component';

const meta: Meta<CaSearchMultipleStates2Component> = {
    title: 'Example/CaSearchMultipleStates',
    component: CaSearchMultipleStates2Component,
    tags: ['autodocs'],
    decorators: [
        applicationConfig({
            providers: [importProvidersFrom(BrowserAnimationsModule)],
        }),
        moduleMetadata({
            imports: [
                // modules
                CommonModule,
                FormsModule,
                ReactiveFormsModule,
                BrowserAnimationsModule,
                AngularSvgIconModule.forRoot(),
                NgbModule,

                //components
                CaInputComponent,
            ],
            providers: [SvgIconRegistryService],
        }),
    ],
    argTypes: {},
};
export default meta;
type Story = StoryObj<CaSearchMultipleStates2Component>;

export const SearchMultipleStatesStory: Story = {
    args: {},
};

export const SearchMultipleStatesInContainer: Story = {
    args: {
        inputPlaceholder: 'items',
    },
    render: (args) => ({
        props: args,
        template: `
            <div>
                <ca-search-multiple-states-2
                    [isDetailsPageSearch]="true"
                    [inputPlaceholder]="inputPlaceholder"
                ></ca-search-multiple-states-2>
            </div>
        `,
    }),
};