import { componentName } from '../src/components/descope-notification';
import { borderedControl, sizeControl } from './commonControls';

const Template = ({ content, position, duration, mode, bordered, size }) => `
    <style nonce="${window.DESCOPE_NONCE}">
      #notification-root {
        width: 100%;
        height: 400px;
        background: pink;
        position: relative;
      }
    </style>
    <div id="notification-root">
      <button id="add-notification">Add Notification</button>
    </div>
  `;

export default {
  component: componentName,
  title: 'descope-notification',
  decorators: [
    (story, { args }) => {
      setTimeout(() => {
        document.querySelector('#add-notification').addEventListener('click', (e) => {
          const tpl = document.createElement('template');
          tpl.innerHTML = `<descope-notification
        opened='true'
        mode='${args.mode}'
        position='${args.position}'
        duration='${args.duration}'
        size='${args.size}'
        bordered='${args.bordered}'
      >
        ${args.content}
        <button slot="close" data-id="closeNotification">close</button>
      </descope-notification>
      `;

          document.querySelector('#notification-root').appendChild(tpl.content.cloneNode(true));
        });
      });

      return story();
    },
  ],
  argTypes: {
    ...sizeControl,
    ...borderedControl,
    mode: {
      name: 'Mode',
      options: ['success', 'error'],
      control: { type: 'select' },
    },
    position: {
      name: 'Position',
      options: [
        'top-stretch',
        'top-start',
        'top-center',
        'top-end',
        'middle',
        'bottom-start',
        'bottom-center',
        'bottom-end',
        'bottom-stretch',
      ],
      control: { type: 'select' },
    },
  },
};

export const Default = Template.bind({});

Default.args = {
  position: 'bottom-start',
  duration: 3000,
  size: 'md',
  bordered: false,
  mode: 'success',
  content: 'Action completed with status',
};
