import { componentName } from '../src/components/descope-security-questions-verify';
import {
  directionControl,
  errorMessageIconAttrs,
  errorMessageIconControl,
  sizeControl,
} from './commonControls';

const questions = [
  { id: '1', text: 'What is your favorite color?' },
  {
    id: '2',
    text: 'What is the name of the city where you were born?',
  },
  {
    id: '3',
    text: 'What is the name of your first pet?',
  },
];

const Template = ({
  direction,
  size,
  gap,
  readOnly,
  'full-width': fullWidth,
  answerPlaceholder,
  'question-mode': questionMode,
  'question-text-align': questionTextAlign,
  'answer-data-errormessage-value-missing': answerDataErrorMessageValueMissing,
  errorMsgIcon,
}) => `
<style nonce="${window.DESCOPE_NONCE}">
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
</style>
<div class="wrapper">
  <descope-security-questions-verify
    st-host-direction="${direction || ''}"
    size=${size || ''}
    st-gap="${gap}px"
    readonly="${readOnly}"
    full-width="${fullWidth}"
    questions='${JSON.stringify(questions)}'
    answer-placeholder="${answerPlaceholder}"
    question-mode="${questionMode}"
    st-question-text-align="${questionTextAlign}"
    answer-data-errormessage-value-missing="${answerDataErrorMessageValueMissing || ''}"
    ${errorMsgIcon ? errorMessageIconAttrs : ''}
  >
  </descope-security-questions-verify>

  <div>
    <button id="submit">Validate</button>
  </div>
</div>
`;

export default {
  component: componentName,
  title: 'descope-security-questions-verify',
  decorators: [
    (story) => {
      setTimeout(() => {
        const button = document.querySelector('#submit');
        button.onclick = () => {
          document.querySelector('descope-security-questions-verify').reportValidity();
        };
      });
      return story();
    },
  ],
  argTypes: {
    ...directionControl,
    ...sizeControl,
    ...errorMessageIconControl,
    gap: {
      name: 'Gap',
      control: { type: 'range', min: 0, max: 30, step: 1 },
    },
    'question-mode': {
      name: 'Mode',
      options: ['none', 'primary', 'secondary', 'success', 'error'],
      control: { type: 'select' },
    },
    'question-text-align': {
      name: 'Text Align',
      options: ['left', 'center', 'right'],
      control: { type: 'select' },
    },
    'answer-data-errormessage-value-missing': {
      name: 'Answer Custom Error: Mandatory',
      control: { type: 'text' },
    },
  },
};

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

Default.args = {
  size: 'sm',
  gap: 10,
  readOnly: false,
  'full-width': false,
  answerPlaceholder: 'Answer',
  'question-mode': 'primary',
  'answer-data-errormessage-value-missing': 'Please fill out this field.',
};
