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

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

// components
import { CaCheckboxSelectedCountComponent } from './ca-checkbox-selected-count.component';

const meta: Meta<CaCheckboxSelectedCountComponent> = {
    title: 'Example/CaCheckboxSelectedCount',
    component: CaCheckboxSelectedCountComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [HttpClientModule, , AngularSvgIconModule.forRoot()],
            providers: [SvgIconRegistryService],
        }),
    ],
};

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

const getBackgroundElement = (): string => `
    <div 
        class='d-flex align-items-center' 
        style='padding-left: 50px;'
    >
        <app-ca-checkbox-selected-count 
            [itemsTotalCount]="itemsTotalCount"
            [itemsSelectedCount]="itemsSelectedCount">
        </app-ca-checkbox-selected-count>
    </div>
`;

export const CheckboxSelectedCountDefault: Story = {
    render: (args) => ({
        props: {
            ...args,
            itemsTotalCount: 25,
            itemsSelectedCount: 0,
        },
        template: getBackgroundElement(),
    }),
};

export const CheckboxSelectedCountHasSelectedItems: Story = {
    render: (args) => ({
        props: {
            ...args,
            itemsTotalCount: 25,
            itemsSelectedCount: 4,
        },
        template: getBackgroundElement(),
    }),
};

export const CheckboxSelectedCountHasSelectedAllItems: Story = {
    render: (args) => ({
        props: {
            ...args,
            itemsTotalCount: 25,
            itemsSelectedCount: 25,
        },
        template: getBackgroundElement(),
    }),
};

export const CheckboxSelectedCountHasSelectedHundredAndMoreItems: Story = {
    render: (args) => ({
        props: {
            ...args,
            itemsTotalCount: 500,
            itemsSelectedCount: 444,
        },
        template: getBackgroundElement(),
    }),
};

export const CheckboxSelectedCountHasSelectedThousandAndMoreItems: Story = {
    render: (args) => ({
        props: {
            ...args,
            itemsTotalCount: 4800,
            itemsSelectedCount: 4400,
        },
        template: getBackgroundElement(),
    }),
};