import { componentName } from '../src/components/descope-modal';

const template = `
<descope-container direction="column" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
  <descope-container direction="column" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
    <descope-text-field full-width="true" size="xs" bordered="true" label="Name"></descope-text-field>
    <descope-email-field full-width="true" size="xs" bordered="true" label="Email"></descope-email-field>
    <descope-phone-field full-width="true" size="xs" bordered="true" label="Phone"></descope-phone-field>
  </descope-container>
  <descope-container direction="row" justify-content="flex-end" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
    <descope-button variant="link" size="xs" mode="error">Cancel</descope-button>
    <descope-button variant="contained" size="xs" mode="primary">Submit</descope-button>
  </descope-container>
</descope-container>`;

const Template = ({ opened }) => {
  const loader = `
    <descope-container direction="column" st-align-items="center" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
      <descope-loader-radial size="sm" mode="primary"></descope-loader-radial>
    </descope-container>
  `;

  return `
    <descope-modal opened="${opened}">
      ${loader}
    </descope-modal>
    `;
};

export default {
  component: componentName,
  title: 'descope-modal',
  decorators: [
    (render) => {
      setTimeout(() => {
        const modal = document.querySelector('descope-modal');
        setTimeout(() => (modal.innerHTML = template), 500);
      });
      return render();
    },
  ],
};

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

Default.args = {
  opened: true,
};
