import { componentName } from '../src/components/descope-policy-validation';
import { directionControl } from './commonControls';

const availablePolicies = [
  {
    id: 'minlength',
    message: 'At least {{value}} characters',
    pattern: '^.{{{value}},}$',
    data: {
      value: 8,
    },
  },
  {
    id: 'lowercase',
    message: '1 lowercase letter',
    pattern: '[a-z]',
  },
  {
    id: 'uppercase',
    message: '1 uppercase letter',
    pattern: '[A-Z]',
  },
  {
    id: 'anyletter',
    message: '1 letter (any case)',
    pattern: '[a-zA-Z]',
  },
  {
    id: 'number',
    message: '1 number',
    pattern: '\\d',
  },
  {
    id: 'nonalphanumeric',
    message: '1 symbol',
    pattern: '[^a-zA-Z0-9]',
  },
  {
    id: 'disallowedchars',
    message: 'Does not contain: {{value}}',
    pattern: `^[^'"]*$`,
    data: { value: `'"` },
  },
  {
    id: 'disallowemail',
    message: 'Does not match your email',
    compare: 'STR_NEQ_CI',
    data: { expected: 'user@example.com' },
  },
];

// HTML-attribute-escape any user-supplied string so the template still parses
// when the value itself contains quotes (eg. the default disallowed-chars `'"`).
const escapeAttr = (v) =>
  String(v ?? '')
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');

const Template = ({
  value,
  label,
  data,
  direction,
  useNumber,
  useLowercase,
  useUppercase,
  useAnyLetter,
  useSymbol,
  useMinLength,
  useDisallowedChars,
  useDisallowEmail,
  minLengthValue,
  disallowedCharsValue,
  emailValue,
}) => {
  const policies = [
    useMinLength ? 'minlength' : null,
    useLowercase ? 'lowercase' : null,
    useUppercase ? 'uppercase' : null,
    useAnyLetter ? 'anyletter' : null,
    useNumber ? 'number' : null,
    useSymbol ? 'nonalphanumeric' : null,
    useDisallowedChars ? 'disallowedchars' : null,
    useDisallowEmail ? 'disallowemail' : null,
  ].filter(Boolean);

  return `
  <descope-policy-validation
    label="${escapeAttr(label)}"
    value="${escapeAttr(value)}"
    data="${escapeAttr(JSON.stringify(data) || '')}"
    active-policies="${policies || ''}"
    data-password-policy-value-minlength="${escapeAttr(minLengthValue)}"
    data-password-policy-value-disallowedchars="${escapeAttr(disallowedCharsValue)}"
    data-password-policy-value-email="${escapeAttr(emailValue)}"
    st-host-direction="${escapeAttr(direction)}"
  ></descope-policy-validation>
`;
};

export default {
  component: componentName,
  title: 'descope-policy-validation',
  parameters: {
    panelPosition: 'right',
    controls: { expanded: true },
  },
  argTypes: {
    ...directionControl,
  },
};

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

Default.args = {
  value: '',
  label: 'Policy Validation',
  data: availablePolicies,
  'active-policies': [],
  useNumber: false,
  useLowercase: false,
  useUppercase: false,
  useAnyLetter: false,
  useSymbol: false,
  useMinLength: false,
  useDisallowedChars: false,
  useDisallowEmail: false,
  minLengthValue: undefined,
  disallowedCharsValue: `'"`,
  emailValue: 'user@example.com',
};
