import { action } from '@storybook/addon-actions';
import { componentName } from '../src/components/descope-user-auth-method';
import { directionControl, fullWidthControl, labelControl } from './commonControls';

import methodIcon from './icons/method-icon.svg';
import buttonIcon from './icons/button-icon.svg';
import fulfilledButtonIcon from './icons/fulfilled-button-icon.svg';

const Template = ({
  'full-width': fullWidth,
  'button-label': buttonLabel,
  'fulfilled-button-label': fulfilledButtonLabel,
  'fulfilled-editable': fulfilledEditable,
  'unfulfilled-editable': unfulfilledEditable,
  direction,
  label,
  fulfilled,
}) => `
  <descope-user-auth-method
    full-width="${fullWidth || 'false'}"
    label="${label || ''}"
    button-label="${buttonLabel || ''}"
    fulfilled="${fulfilled || 'false'}"
    fulfilled-button-label="${fulfilledButtonLabel || ''}"
    ${fulfilledEditable !== undefined ? `fulfilled-editable=${fulfilledEditable}` : ''}
    ${unfulfilledEditable !== undefined ? `unfulfilled-editable="${unfulfilledEditable}` : ''}"
    st-host-direction="${direction ?? ''}"
  >
    <img src="${methodIcon}" slot="method-icon" />
    <img src="${buttonIcon}" slot="button-icon" />
    <img src="${fulfilledButtonIcon}" slot="fulfilled-button-icon" />
  </descope-user-aut>
`;

export default {
  component: componentName,
  title: 'descope-user-auth-method',
  decorators: [
    (story) => {
      setTimeout(() => {
        const ele = document.querySelector('descope-user-auth-method');
        ele.addEventListener('button-clicked', action('unfulfilled-button-clicked'));
        ele.addEventListener('fulfilled-button-clicked', action('fulfilled-button-clicked'));
      });

      return story();
    },
  ],
  argTypes: {
    ...fullWidthControl,
    ...directionControl,
    ...labelControl,
    'button-label': {
      name: 'Unfulfilled Button Label',
      control: { type: 'text' },
    },
    'fulfilled-button-label': {
      name: 'Fulfilled Button Label',
      control: { type: 'text' },
    },
    'fulfilled-editable': {
      name: 'Show fulfilled button',
      control: { type: 'boolean' },
    },
    'unfulfilled-editable': {
      name: 'Show unfulfilled button',
      control: { type: 'boolean' },
    },
  },
};

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

Default.args = {
  label: 'Label',
  fulfilled: false,
};
