import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CarouselModule } from 'primeng/carousel';
import { DropdownModule } from 'primeng/dropdown';
import { TextComponent } from '../text/text.component';
import { TooltipModule } from 'primeng/tooltip';
import { DateSelectComponent } from './date-select/date-select.component';
import { DateTabsComponent, IDateTab } from './date-tabs.component';
import { TabButtonComponent } from './tab-button/tab-button.component';

export default {
    title: 'Components/DateTabs',
    component: DateTabsComponent,
    decorators: [
        moduleMetadata({
            declarations: [
                TabButtonComponent,
                TextComponent,
                DateSelectComponent,
            ],
            imports: [
                BrowserAnimationsModule,
                FormsModule,
                CarouselModule,
                TooltipModule,
                DropdownModule,
            ],
        }),
    ],
    argTypes: {
        tabs: {
            control: 'object',
        },
        tabsPerPage: {
            control: {
                type: 'range',
                min: 3,
                max: 14,
                step: 1,
            },
        },
    },
} as Meta;

const generateTab = (day: number): IDateTab => {
    return {
        label: `${day} апреля`,
        mobileLabel: `${day} апреля`,
        value: {
            date: `${day} апреля`,
        },
        active: day === 9,
        disabled: false,
    };
};

const tabs: IDateTab[] = Array.from({ length: 14 }).map((_, index) =>
    generateTab(index + 1),
);

const Template: Story<DateTabsComponent> = (args) => {
    return {
        props: args,
    };
};

export const Default = Template.bind({});
Default.args = {
    tabs,
    tabsPerPage: 7,
    caption: 'SHARED.ARRIVAL_DATE',
};
