import React from 'react';
import doc from './doc.mdx?raw';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import {
  SingleCharacterInputs,
  SingleCharacterInput,
} from '@digigov/ui/form/SingleCharacterInputs';
import { Hint } from '@digigov/ui/typography/Hint';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export default {
  title: 'Digigov UI/form/SingleCharacterInputs',
  description:
    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
  component: SingleCharacterInputs,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'SingleCharacterInputs',
};

export const WithControls = {
  render: (args) => {
    return (
      <FieldContainer error={args.error}>
        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>
          <FieldsetLegend heading={args.singleQuestionInPage}>
            {args.legend}
          </FieldsetLegend>
          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
          {args.error && (
            <ErrorMessage id={args.errorId}>
              <VisuallyHidden>Λάθος:</VisuallyHidden>
              {args.errorMessage}
            </ErrorMessage>
          )}
          <SingleCharacterInputs>
            {args.items.map((item) => (
              <SingleCharacterInput
                key={item.value}
                name={item.value}
                defaultValue={item.defaultValue}
                error={item.error}
              />
            ))}
          </SingleCharacterInputs>
        </Fieldset>
      </FieldContainer>
    );
  },
  args: {
    singleQuestionInPage: false,
    legend: 'Κωδικός Επιβεβαίωσης',
    hint: true,
    hintMessage:
      'Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.',
    hintId: 'code-hint',
    error: false,
    errorMessage: 'Ο κωδικός που εισάγατε είναι λανθασμένος',
    errorId: 'code-error',
    items: [
      {
        defaultValue: '',
        name: 'digit-1',
        error: false,
      },
      {
        defaultValue: '',
        name: 'digit-2',
        error: false,
      },
      {
        defaultValue: '',
        name: 'digit-3',
        error: false,
      },
      {
        defaultValue: '',
        name: 'digit-4',
        error: false,
      },
      {
        defaultValue: '',
        name: 'digit-5',
        error: false,
      },
    ],
  },
  argTypes: {
    singleQuestionInPage: {
      control: { type: 'boolean' },
    },
    legend: {
      control: { type: 'text' },
    },
    hint: {
      control: { type: 'boolean' },
    },
    hintMessage: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    hintId: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    error: {
      control: { type: 'boolean' },
    },
    errorMessage: {
      control: { type: 'text' },
      if: { arg: 'error', eq: true },
    },
    items: {
      control: { type: 'object' },
    },
  },
  parameters: {
    controls: {
      exclude: ['ref'],
    },
  },
};

export { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
export { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
export { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
export { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';