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

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>
          )}
          <TextArea
            dense={args.dense}
            name={args.name}
            disabled={args.disabled}
            aria-describedby={args.hintId}
          ></TextArea>
          {args.bottomHint && (
            <Hint id={args.bottomHintId}>{args.bottomHintMessage}</Hint>
          )}
        </LabelContainer>
      </FieldContainer>
    );
  },
  args: {
    label: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;',
    name: 'textarea',
    hint: true,
    hintMessage: 'Προαιρετικό',
    hintId: 'hintId',
    error: false,
    errorMessage: 'Εισάγετε περιεχόμενο.',
    errorId: 'errorId',
    bottomHint: true,
    bottomHintMessage: 'Μπορείτε να πληκτρολογήσετε μέχρι 500 χαρακτήρες.',
    bottomHintId: 'bottomHintId',
    dense: false,
    disabled: false,
  },
  argTypes: {
    label: {
      control: 'text',
    },
    name: {
      control: 'text',
    },
    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 },
    },
    bottomHint: {
      control: 'boolean',
    },
    bottomHintMessage: {
      control: 'text',
    },
    bottomHintId: {
      control: 'text',
    },
    dense: {
      control: 'boolean',
    },
    disabled: {
      control: 'boolean',
    },
  },
  parameters: {
    controls: {
      exclude: ['ref', 'type'],
    },
  },
};
export { Default } from '@digigov/ui/form/TextArea/__stories__/Default';
export { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
export { WithDeclaredRows } from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
export { MultipleQuestions } from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
export { LimitedCharacters } from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
export { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
export { DisabledInput } from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
export { Dense } from '@digigov/ui/form/TextArea/__stories__/Dense';