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

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

//Components
import { CaSortingCardDropdownComponent } from './ca-sorting-card-dropdown.component';

const meta: Meta<CaSortingCardDropdownComponent> = {
    title: 'Example/CaSortingCardDropdownComponent',
    component: CaSortingCardDropdownComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [HttpClientModule, AngularSvgIconModule.forRoot()],
            providers: [SvgIconRegistryService],
        }),
        applicationConfig({
            providers: [importProvidersFrom(BrowserAnimationsModule)],
        }),
    ],
    argTypes: {},
    args: {},
};

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

export const SortingCardDropdown: Story = {
    args: {
        options: [
            {
                id: 1,
                key: 'loadNumber',
                label: 'Load No',
                labelToolbar: 'Load No.',
                width: 154,
                minWidth: 60,
                maxWidth: 250,
                isResizable: true,
                isDisabled: true,
                hasSort: true,
                isChecked: true,
                pinned: 'left',
            },
            {
                key: 'loadType',
                label: 'Type',
                labelToolbar: 'Type',
                width: 82,
                minWidth: 82,
                maxWidth: 100,
                isResizable: true,
                isChecked: false,
                hasSort: true,
            },
            {
                key: 'loadDispatcher',
                label: 'Dispatcher',
                labelToolbar: 'Dispatcher',
                width: 208,
                minWidth: 50,
                maxWidth: 1020,
                isResizable: true,
                isChecked: true,
                hasSort: true,
                sortName: 'Dispatcher',
            },
            {
                key: 'dateCreated',
                label: 'Created',
                labelToolbar: 'Date Created',
                width: 88,
                minWidth: 72,
                maxWidth: 88,
                isResizable: true,
                isChecked: false,
                hasSort: true,
                sortName: 'AddedDate',
            },
            {
                key: 'dateEdited',
                label: 'Edited',
                labelToolbar: 'Date Edited',
                width: 88,
                minWidth: 72,
                maxWidth: 88,
                isResizable: true,
                isChecked: false,
                hasSort: true,
                sortName: 'EditedDate',
            },
        ],
    },
};