import { componentName } from '../src/components/descope-security-questions-setup';
import {
  directionControl,
  errorMessageIconAttrs,
  errorMessageIconControl,
  inputLabelTypeControl,
  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,
  count,
  readOnly,
  'full-width': fullWidth,
  questionLabel,
  questionPlaceholder,
  answerLabel,
  answerPlaceholder,
  'label-type': labelType,
  'question-data-errormessage-value-missing': questionDataErrorMessageValueMissing,
  '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-setup
    st-host-direction="${direction || ''}"
    size=${size || ''}
    st-gap="${gap}px"
    readonly="${readOnly}"
    full-width="${fullWidth}"
    count="${count}"
    questions='${JSON.stringify(questions)}'
    question-label="${questionLabel}"
    question-placeholder="${questionPlaceholder}"
    answer-label="${answerLabel}"
    answer-placeholder="${answerPlaceholder}"
    label-type="${labelType}"
    question-data-errormessage-value-missing="${questionDataErrorMessageValueMissing || ''}"
    answer-data-errormessage-value-missing="${answerDataErrorMessageValueMissing || ''}"
    ${errorMsgIcon ? errorMessageIconAttrs : ''}

  >
  </descope-security-questions-setup>

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

export default {
  component: componentName,
  title: 'descope-security-questions-setup',
  decorators: [
    (story) => {
      setTimeout(() => {
        const button = document.querySelector('#submit');
        button.onclick = () => {
          document.querySelector('descope-security-questions-setup').reportValidity();
        };
      });
      return story();
    },
  ],
  argTypes: {
    ...directionControl,
    ...sizeControl,
    ...inputLabelTypeControl,
    ...errorMessageIconControl,
    'question-data-errormessage-value-missing': {
      name: 'Question Custom Error: Mandatory',
      control: { type: 'text' },
    },
    'answer-data-errormessage-value-missing': {
      name: 'Answer Custom Error: Mandatory',
      control: { type: 'text' },
    },
    gap: {
      name: 'Gap',
      control: { type: 'range', min: 0, max: 30, step: 1 },
    },
    count: {
      name: 'Count',
      control: { type: 'range', min: 1, max: questions.length, step: 1 },
    },
  },
};

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

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