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

//module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';

//Components
import { CaLoadStatusComponent } from './ca-load-status.component';

const meta: Meta<CaLoadStatusComponent> = {
    title: 'Example/CaLoadStatusComponent',
    component: CaLoadStatusComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({}),
        applicationConfig({
            providers: [importProvidersFrom(BrowserAnimationsModule)],
        }),
    ],
    argTypes: {},
    args: {
        width: 130,
        height: 26,
    },
};

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

export const LoadStatus: Story = {
    args: {
        status: { name: 'tonu', id: 25 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus2: Story = {
    args: {
        status: { name: 'Tonu T', id: 25 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus3: Story = {
    args: {
        status: { name: 'I Booked F', id: 1 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus4: Story = {
    args: {
        status: { name: 'R Assigned T', id: 2 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus5: Story = {
    args: {
        status: { name: 'R Dispatched T', id: 7 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus6: Story = {
    args: {
        status: { name: 'R Loading T', id: 46 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus7: Story = {
    args: {
        status: { name: 'R Offloading T', id: 47 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus8: Story = {
    args: {
        status: { name: 'R Invoiced T', id: 8 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatus9: Story = {
    args: {
        status: { name: 'R Cancelled T', id: 44 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatusSplit: Story = {
    args: {
        status: { name: 'Split', id: 45 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatusPreassigned: Story = {
    args: {
        status: { name: 'Preassigned', id: 56 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatusWithTime: Story = {
    args: {
        status: { name: 'R Repair T', id: 52 },
        time: '8D : 21H',
        isDefaultHoverFocus: true,
    },
};

export const LoadStatusisNoStyle: Story = {
    args: {
        status: { name: 'R Cancelled T', id: 44 },
        isNoStyle: true,
    },
};

export const LoadStatusisNoStyleFontSize: Story = {
    args: {
        status: { name: 'R Invoiced T', id: 8 },
        fontSize: 14,
        isNoStyle: true,
    },
};

export const IsTitleCardDropdown: Story = {
    args: {
        status: { name: 'R Cancelled T', id: 44 },
        isTitleCardDropdown: true,
    },
};

export const DoubleLetters: Story = {
    args: {
        status: { name: 'R F Cancelled T S', id: 44 },
        isTitleCardDropdown: true,
        width: 160,
    },
};

export const DarkVersion: Story = {
    args: {
        status: { name: 'R F Cancelled T 1', id: 44 },
        isDark: true,
        width: 160,
        isNoStyle: true,
    },
};

export const PaidDropdownStatusChange: Story = {
    args: {
        status: { name: 'Paid', id: 13 },
        isDark: true,
        width: 160,
        isDropdownStatusChange: true,
    },
};

export const ChekedInPickup: Story = {
    args: {
        status: { name: 'Cheked-In 1', id: 50 },
        isDark: true,
        width: 160,
        isNoStatesColor: true,
    },
};

export const ChekedInDelivery: Story = {
    args: {
        status: { name: 'Cheked-In 1', id: 51 },
        isDark: true,
        width: 160,
        isNoStatesColor: true,
    },
};

export const Loaded: Story = {
    args: {
        status: { name: 'Loaded 1', id: 4 },
        isDark: true,
        isNoStatesColor: true,
        width: 160,
    },
};

export const LoadStatusCardBooked: Story = {
    args: {
        status: { name: 'Booked', id: 1 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardAssigned: Story = {
    args: {
        status: { name: 'Assigned', id: 2 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardDispatched: Story = {
    args: {
        status: { name: 'Dispatched', id: 7 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardChekedInPickup: Story = {
    args: {
        status: { name: 'Cheked-In 1', id: 50 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardChekedInDelivery: Story = {
    args: {
        status: { name: 'Cheked-In 1', id: 51 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardPaid: Story = {
    args: {
        status: { name: 'T Paid F S', id: 13 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardCancelled: Story = {
    args: {
        status: { name: 'R Cancelled T', id: 44 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardTonu: Story = {
    args: {
        status: { name: 'Tonu T', id: 25 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const LoadStatusCardSplit: Story = {
    args: {
        status: { name: 'Split', id: 45 },
        isStatusCard: true,
        fontSize: 14,
        width: 160,
    },
};

export const RevisedF: Story = {
    args: {
        status: { name: 'Revised F', id: 39 },
        isDefaultHoverFocus: true,
    },
};

export const InvoicedHoldFactoring: Story = {
    args: {
        status: { name: 'I Hold F', id: 55 },
        isDefaultHoverFocus: true,
    },
};

export const LoadStatusBig: Story = {
    args: {
        status: { name: 'R Dispatched T', id: 7 },
        isDefaultHoverFocus: true,
        height: 46,
    },
};

export const LoadStatusBig2: Story = {
    args: {
        status: { name: 'Tonu T', id: 25 },
        isDefaultHoverFocus: true,
        isTableBigStatus: true,

        height: 46,
        time: '17 days ago',
    },
};

export const LoadStatusBigDisabledClick: Story = {
    args: {
        status: { name: 'Tonu T', id: 25 },
        isDefaultHoverFocus: true,
        isTableBigStatus: true,
        isDisabledClick: true,
        height: 46,
        time: '17 days ago',
    },
};