import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig, argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { ButtonComponent, ModalComponent } from '../../public-api';

type ModalWithTitleAndContent = ModalComponent & { title: string; content: string };

const meta: Meta<ModalWithTitleAndContent> = {
  title: 'Components/Modal/Modal',
  id: 'modal',
  component: ModalComponent,
  decorators: [
    applicationConfig({
      providers: [provideAnimations()]
    }),
    moduleMetadata({
      imports: [ButtonComponent]
    })
  ],
  argTypes: {
    closed: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [ModalComponent]
    }
  }
};

export default meta;

type Story = StoryObj<ModalWithTitleAndContent>;

export const Modal: Story = {
  args: {
    modalId: 'example-modal',
    closeLabel: 'Close',
    title: 'Modal title',
    content: 'Modal content'
  },
  render: (args) => ({
    props: args,
    template: `
    <div style="height: 40vh; transform: translateZ(0); overflow: auto; background-color: var(--nj-semantic-color-background-overlay);">
        <nj-modal ${argsToTemplate(args, { exclude: ['title', 'content'] })}>
            <span njModalTitle>{{title}}</span>
            <div njModalContent>
                <p>{{content}}</p>
            </div>
            <ng-container njModalFooter>
                <nj-button emphasis="subtle">Cancel</nj-button>
                <nj-button>Submit</nj-button>
            </ng-container>
        </nj-modal>
    </div>
  `
  })
};