import { withA11y } from '@storybook/addon-a11y';
import { Meta, moduleMetadata } from '@storybook/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { ModalContainerComponent } from './modal-container.component';
import { ArrowLinkComponent } from '../../common/arrow-link/arrow-link.component';


export default {
    title: 'Structure/Modal Container',
    component: ModalContainerComponent,
    
    decorators: [
        moduleMetadata({
            imports: [
                BrowserModule,
                BrowserAnimationsModule,
                MatDialogModule,
                MatButtonModule 
            ],
            declarations: [
                ArrowLinkComponent,
                ModalContainerComponent
            ]
        }),
        withA11y
    ]
} as Meta;

const Template = (args: ModalContainerComponent) => ({
    component: ModalContainerComponent,
    props: args,
    template: `
    <onguard-modal-container>
        <ng-template #modalContent>
            <h1 mat-dialog-title>Favorite Animal</h1>
            <div mat-dialog-content>

            </div>
        </ng-template>
    <onguard-modal-container>
    `
});

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


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






// <h1 mat-dialog-title>Favorite Animal</h1>
// <div mat-dialog-content>
//   My favorite animal is:
//   <ul>
//     <li>
//       <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
//     </li>
//     <li>
//       <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
//     </li>
//     <li>
//       <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
//     </li>
//   </ul>
// </div>