import {
  type Meta,
  type StoryObj,
  applicationConfig,
} from '@storybook/angular';
//modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { importProvidersFrom } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
//components
import { CaSearchMultipleStatesComponent } from '../ca-search-multiple-states/ca-search-multiple-states.component';
import { ChipsColorsEnum } from './utils/enums/chips-colors.enum';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta<CaSearchMultipleStatesComponent> = {
  title: 'example/CaSearchMultipleStatesComponent',
  component: CaSearchMultipleStatesComponent,
  decorators: [
    applicationConfig({
      providers: [
        importProvidersFrom(
          BrowserAnimationsModule,
          HttpClientModule,
          AngularSvgIconModule.forRoot()
        ),
      ],
    }),
  ],
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<CaSearchMultipleStatesComponent>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const SearchMultipleStatesDefault: Story = {
  args: {
    searchType: 'tabel',
    selectedTabData: {
      title: 'active',
      extended: false,
      field: 'active',
      isActive: true,
      length: 27,
      stateName: 'drivers',
      gridNameTitle: 'Drivers',
      tableConfiguration: 'driver',
      data: {},
      gridColumns: {
        ngTemplate: 'checkbox',
        title: '',
        field: 'select',
        name: 'Select',
        hidden: false,
        width: 28,
        isPined: true,
        filter: '',
        isNumeric: false,
        index: 0,
        sortable: false,
        isActionColumn: true,
        isSelectColumn: true,
        avatar: null,
        progress: null,
        hoverTemplate: null,
        filterable: false,
        disabled: false,
        export: false,
        resizable: false,
        tableHeadTitle: '',
      },
    },
  },
};

export const SearchMultipleStatesSearchOne: Story = {
  args: {
    chips: [
      {
        query: 'One',
        color: ChipsColorsEnum.FIRST_CHIP_COLOR,
        searchText: 'One',
        canDoAnimation: true,
      },
    ],
    searchType: 'tabel',
    selectedTabData: {
      title: 'active',
      extended: false,
      field: 'active',
      isActive: true,
      length: 27,
      stateName: 'drivers',
      gridNameTitle: 'Drivers',
      tableConfiguration: 'driver',
      data: {},
      gridColumns: {
        ngTemplate: 'checkbox',
        title: '',
        field: 'select',
        name: 'Select',
        hidden: false,
        width: 28,
        isPined: true,
        filter: '',
        isNumeric: false,
        index: 0,
        sortable: false,
        isActionColumn: true,
        isSelectColumn: true,
        avatar: null,
        progress: null,
        hoverTemplate: null,
        filterable: false,
        disabled: false,
        export: false,
        resizable: false,
        tableHeadTitle: '',
      },
    },
  },
};

export const SearchMultipleStatesSearchTwo: Story = {
  args: {
    chips: [
      {
        query: 'One',
        color: ChipsColorsEnum.FIRST_CHIP_COLOR,
        searchText: 'One',
        canDoAnimation: true,
      },
      {
        query: 'Two',
        color: ChipsColorsEnum.SECOND_CHIP_COLOR,
        searchText: 'Two',
        canDoAnimation: true,
      },
    ],
    searchType: 'tabel',
  },
};

export const SearchMultipleStatesSearchThree: Story = {
  args: {
    chips: [
      {
        query: 'One',
        color: ChipsColorsEnum.FIRST_CHIP_COLOR,
        searchText: 'One',
        canDoAnimation: true,
      },
      {
        query: 'Two',
        color: ChipsColorsEnum.SECOND_CHIP_COLOR,
        searchText: 'Two',
        canDoAnimation: true,
      },
      {
        query: 'Three',
        color: ChipsColorsEnum.THIRD_CHIP_COLOR,
        searchText: 'Three',
        canDoAnimation: true,
      },
    ],
    searchType: 'tabel',
  },
};

export const SearchMultipleStatesSearchDetails: Story = {
  args: {
    searchType: 'Contact',
    toolbarSearch: false,
    isDetailsPageSearch: true,
    selectedTabData: {
      gridNameTitle: 'Contact'
    }
  },
};