import React from 'react';
import doc from './doc.mdx?raw';
import TextInput from '@digigov/ui/form/TextInput';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
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/TextInput',
  description:
    'Use the text input component when you need to let users enter text that’s no longer than a single line.',
  link: 'https://guide.services.gov.gr/docs/components/TextInput',
  component: TextInput,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'TextInput',
};

export const WithControls = {
  render: (args) => {
    return (
      <FieldContainer error={args.error}>
        <LabelContainer>
          <LabelTitle size="md">{args.label}</LabelTitle>
          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
          {args.error && (
            <ErrorMessage id={args.errorId}>
              <VisuallyHidden>Λάθος:</VisuallyHidden>
              {args.errorMessage}
            </ErrorMessage>
          )}
          <TextInput
            dense={args.dense}
            name={args.name}
            maxWidth={args.maxWidth === 'full' ? undefined : args.maxWidth}
            width={args.width}
            disabled={args.disabled}
            aria-describedby={args.hintId}
          ></TextInput>
        </LabelContainer>
      </FieldContainer>
    );
  },
  args: {
    label: 'Όνομα επιχείρησης',
    name: 'textarea',
    width: '100%',
    maxWidth: 'full',
    hint: true,
    hintMessage: 'Ποιο είναι το όνομα που εμφανίζεται στην εφορία;',
    hintId: 'hintId',
    error: false,
    errorMessage: 'Πρέπει να συμπληρώσετε το πεδίο.',
    errorId: 'errorId',
    dense: false,
    disabled: false,
  },
  argTypes: {
    label: {
      control: 'text',
    },
    name: {
      control: 'text',
    },
    maxWidth: {
      options: [
        '2-char',
        '3-char',
        '4-char',
        '5-char',
        '10-char',
        '20-char',
        'full',
      ],
      control: { type: 'select' },
    },
    width: {
      options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],
      control: { type: 'select' },
    },
    hint: {
      control: 'boolean',
    },
    hintMessage: {
      control: 'text',
      if: { arg: 'hint', eq: true },
    },
    hintId: {
      control: 'text',
      if: { arg: 'hint', eq: true },
    },
    error: {
      control: 'boolean',
    },
    errorMessage: {
      control: 'text',
      if: { arg: 'error', eq: true },
    },
    errorId: {
      control: 'text',
      if: { arg: 'error', eq: true },
    },
    dense: {
      control: 'boolean',
    },
    disabled: {
      control: 'boolean',
    },
  },
  parameters: {
    controls: {
      exclude: ['ref', 'type'],
    },
  },
};

export { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
export { MultipleQuestions } from '@digigov/ui/form/TextInput/__stories__/MultipleQuestions';
export { FixedWidths } from '@digigov/ui/form/TextInput/__stories__/FixedWidths';
export { FluidWidths } from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
export { WithHint } from '@digigov/ui/form/TextInput/__stories__/WithHint';
export { AskingForNumbers } from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
export { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
export { DisabledInput } from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
export { DisabledInputWithValue } from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
export { Dense } from '@digigov/ui/form/TextInput/__stories__/Dense';