import { withA11y } from '@storybook/addon-a11y';
import { TabContainerComponent } from './tab-container.component';
import { Meta, moduleMetadata } from '@storybook/angular';
import { MatTabsModule, MAT_TAB_GROUP } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatRippleModule } from '@angular/material/core';
import { BrowserModule } from '@angular/platform-browser';
import { TabContainerModule } from './tab-container.module';


export default {
    title: 'Structure/Tab Container',
    component: TabContainerComponent,
    
    decorators: [
        moduleMetadata({
            imports: [
                BrowserModule,
                BrowserAnimationsModule,
                MatTabsModule,
                TabContainerModule
            ],
            providers: [
                {
                    provide: MAT_TAB_GROUP,
                    useValue: undefined,
                },
            ]
        }),
        withA11y
    ]
} as Meta;

const Template = (args: TabContainerComponent) => ({
    component: TabContainerComponent,
    props: args,
    template: `
    <onguard-tab-container>
        <mat-tab label="Tab 3">
            <div class="example-small-box mat-elevation-z4">
            Tab 1 Content
            </div>
        </mat-tab>
        <mat-tab label="Tab 4">
            <div class="example-large-box mat-elevation-z4">
            Tab 2 Content
            </div>
        </mat-tab>
  </onguard-tab-container>
  `
});

//   _____ _             _
//  / ____| |           (_)
// | (___ | |_ ___  _ __ _  ___  ___
//  \___ \| __/ _ \| '__| |/ _ \/ __|
//  ____) | || (_) | |  | |  __/\__ \
// |_____/ \__\___/|_|  |_|\___||___/


export const Primary = Template.bind({});
Primary.args = {
};