import {
  StoryObj,
  Meta,
  moduleMetadata,
  applicationConfig,
} from '@storybook/angular';
import { importProvidersFrom } from '@angular/core';

// modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';

// components
import { CaCollapsibleFilterComponent } from './ca-collapsible-filter.component';

export default {
  title: 'Example/CaCollapsibleFilterComponent',
  component: CaCollapsibleFilterComponent,
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
    moduleMetadata({
      imports: [
        // modules
        AngularSvgIconModule.forRoot(),
        HttpClientModule,
      ],
      providers: [SvgIconRegistryService],
    }),
  ],
  tags: ['autodocs'],
  argTypes: {
    filterArray: {
      control: 'object',
      description: 'Array of filter items to display in the collapsible filter',
      defaultValue: [
        { id: 1, name: 'CDL', isSelected: false },
        { id: 2, name: 'Medical', isSelected: false },
        { id: 3, name: 'Test', isSelected: false },
      ],
    },
    isExpanded: {
      control: 'boolean',
      description: 'Whether the collapsible filter is expanded by default',
      defaultValue: false,
    },
    onTagEmit: {
      action: 'onTagEmit',
      description: 'Action triggered when a tag is clicked',
    },
  },
} as Meta;

type Story = StoryObj<CaCollapsibleFilterComponent>;

export const Default: Story = {
  args: {
    filterArray: [
      { id: 1, name: 'CDL', isSelected: false },
      { id: 2, name: 'Medical', isSelected: false },
      { id: 3, name: 'Test', isSelected: false },
    ],
    isExpanded: false,
  },
};

export const Expanded: Story = {
  args: {
    filterArray: [
      { id: 1, name: 'CDL', isSelected: true },
      { id: 2, name: 'Medical', isSelected: false },
      { id: 3, name: 'Test', isSelected: false },
      { id: 4, name: 'Inactive', isSelected: false },
    ],
    isExpanded: true,
  },
};