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

// components
import { CaSortDropdownComponent } from './ca-sort-dropdown.component';

// services
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { SortDropdownEnum } from './enums';

const meta: Meta<CaSortDropdownComponent> = {
    title: 'Example/CaSortDropdown',
    component: CaSortDropdownComponent,
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    decorators: [
        applicationConfig({
            providers: [
                SvgIconRegistryService,
                importProvidersFrom(
                    HttpClientModule,
                    AngularSvgIconModule.forRoot()
                ),
            ],
        }),
    ],
};

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

export const SortDropdown: Story = {
    args: {
        sortColumns: [
            {
                name: 'Business Name',
                sortName: 'name',
            },
            {
                name: 'Location',
                sortName: 'address',
                isDisabled: true,
            },
            {
                name: 'Rating',
                sortName: 'rating',
            },
            {
                name: 'Date Added',
                sortName: 'createdAt',
            },
            {
                name: 'Last Used',
                sortName: 'updatedAt',
            },
            {
                name: 'Pickup Count',
                sortName: 'pickups',
            },
            {
                name: 'Delivery Count',
                sortName: 'deliveries',
            },
            {
                name: 'Avg. Pickup Time',
                sortName: 'avgPickupTime',
            },
            {
                name: 'Avg. Delivery Time',
                sortName: 'avgDeliveriesTime',
            },
        ],
        dropdownPosition: SortDropdownEnum.RIGHT_TOP,
        dropdownWidth: 167,
    },
};

export const SortDropdownLarge: Story = {
    args: {
        sortColumns: [
            {
                name: 'Business Name',
                sortName: 'name',
            },
            {
                name: 'Location',
                sortName: 'address',
                isDisabled: true,
            },
            {
                name: 'Rating',
                sortName: 'rating',
            },
            {
                name: 'Date Added',
                sortName: 'createdAt',
            },
            {
                name: 'Last Used',
                sortName: 'updatedAt',
            },
            {
                name: 'Pickup Count',
                sortName: 'pickups',
            },
            {
                name: 'Delivery Count',
                sortName: 'deliveries',
            },
            {
                name: 'Avg. Pickup Time',
                sortName: 'avgPickupTime',
            },
            {
                name: 'Avg. Delivery Time',
                sortName: 'avgDeliveriesTime',
            },
        ],
        dropdownPosition: SortDropdownEnum.RIGHT_TOP,
        dropdownWidth: 167,
        isLargeVariation: true,
    },
};

export const SortDropdownDark: Story = {
    args: {
        sortColumns: [
            {
                name: 'Business Name',
                sortName: 'name',
            },
            {
                name: 'Location',
                sortName: 'address',
                isDisabled: true,
            },
            {
                name: 'Rating',
                sortName: 'rating',
            },
            {
                name: 'Date Added',
                sortName: 'createdAt',
            },
            {
                name: 'Last Used',
                sortName: 'updatedAt',
            },
            {
                name: 'Pickup Count',
                sortName: 'pickups',
            },
            {
                name: 'Delivery Count',
                sortName: 'deliveries',
            },
            {
                name: 'Avg. Pickup Time',
                sortName: 'avgPickupTime',
            },
            {
                name: 'Avg. Delivery Time',
                sortName: 'avgDeliveriesTime',
            },
        ],
        dropdownPosition: SortDropdownEnum.RIGHT_TOP,
        dropdownWidth: 167,
        isDarkVariation: true,
    },
};