import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { ModalWrapperStoryComponent } from './modal-wrapper.story-component';

const code = `
// Note that you will need to import '~@angular/cdk/overlay-prebuilt.css' either in your global stylesheet
// or in angular.json under build.styles
import {Dialog, DialogRef} from '@angular/cdk/dialog';

@Component({
  template: '
      <nj-button (buttonClick)="openModal(modalToOpen)">Open Modal</nj-button>
      <ng-template #modalToOpen>
         <nj-modal [hasCloseIcon]="true" modalId="storybook-modal">
            <span njModalTitle>Modal Title</span>
            <div njModalContent>
                <p>Modal content</p>
            </div>
            <ng-container njModalFooter>
                <nj-button emphasis="subtle" (buttonClick)="closeModal()">Cancel</nj-button>
                <nj-button (buttonClick)="closeModal()">Submit</nj-button>
            </ng-container>
        </nj-modal>
      </ng-template>
  '
})
class Component() {
  private dialog = inject(Dialog);
  private dialogRef: DialogRef;

  protected openModal(modalToOpen: TemplateRef<any>) {
    this.dialogRef = this.dialog.open(modalToOpen);
  }

  protected closeModal() {
    this.dialogRef?.close();
  }
}
`;

/**
 * Our modal component with `@angular/cdk/dialog` dialog service `Dialog`,
 * a service provided by Angular CDK that helps manage dialogs (opening, closing...)
 * https://material.angular.io/cdk/dialog/overview. See the example code bellow.
 * Note that you will need to import '~@angular/cdk/overlay-prebuilt.css' either in
 * your global stylesheet or in angular.json under `build.styles`
 */
const meta: Meta<ModalWrapperStoryComponent> = {
  title: 'Components/Modal/Modal Service',
  id: 'modal-service',
  component: ModalWrapperStoryComponent,
  decorators: [
    applicationConfig({
      providers: [provideAnimations()]
    }),
    moduleMetadata({
      imports: [ModalWrapperStoryComponent]
    })
  ],
  parameters: {
    docs: {
      source: {
        language: 'typescript',
        type: 'auto',
        code
      }
    }
  },
  argTypes: {
    closed: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<ModalWrapperStoryComponent>;

export const ModalService: Story = {
  args: {
    hasCloseIcon: true,
    modalId: 'storybook-modal'
  }
};