import React from 'react';
import doc from './doc.mdx?raw';
import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
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/RadioContainer',
  description:
    'Use the radios component when users can only select one option from a list.',
  link: 'https://guide.services.gov.gr/docs/components/radio',
  component: RadioContainer,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'RadioContainer',
};

export const WithControls = {
  render: (args) => {
    return (
      <FieldContainer error={args.error}>
        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>
          <FieldsetLegend
            size={args.legendSize}
            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>
          )}
          <RadioContainer dense={args.dense} layout={args.layout}>
            {args.items &&
              args.items.map((item) => (
                <RadioItem
                  key={item.value}
                  name={args.fieldsetName}
                  value={item}
                  dividerText={item.dividerText}
                  aria-describedby={item.hintId}
                >
                  {item.label}
                  {item.hint && (
                    <Hint id={item.hintId}>{item.hintMessage}</Hint>
                  )}
                </RadioItem>
              ))}
          </RadioContainer>
        </Fieldset>
      </FieldContainer>
    );
  },
  args: {
    legend: 'Πώς θέλετε να συνδεθείτε;',
    legendSize: 'lg',
    singleQuestionInPage: true,
    fieldsetName: 'login-method',
    hint: true,
    hintMessage:
      'Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταυτότητά σας ώστε να προχωρήσετε.',
    hintId: 'hint-id',
    error: false,
    errorMessage: 'Παρακαλώ επιλέξτε μία από τις παρακάτω επιλογές.',
    errorId: 'error-id',
    layout: 'vertical',
    dense: false,
    items: [
      {
        value: 'taxis',
        label: 'Σύνδεση με Taxisnet',
        hint: true,
        hintMessage:
          'Θα πρέπει να έχετε τους κωδικούς Taxisnet για να συνθείτε.',
        hintId: 'hint-id-1',
        dividerText: '',
      },
      {
        value: 'banking',
        label: 'Σύνδεση με λογαρισμό e-banking',
        hint: true,
        hintMessage:
          'Θα πρέπει να έχετε τους κωδικούς του e-banking της τράπεζας για να συνδεθείτε.',
        hintId: 'hint-id-2',
      },
      {
        value: 'none',
        label: 'Χωρίς σύνδεση',
        dividerText: 'ή',
      },
    ],
  },
  argTypes: {
    legend: {
      control: { type: 'text' },
    },
    legendSize: {
      control: { type: 'select' },
      options: ['sm', 'md', 'lg'],
    },
    singleQuestionInPage: {
      control: { type: 'boolean' },
    },
    fieldsetName: {
      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 },
    },
    errorId: {
      control: { type: 'text' },
      if: { arg: 'error', eq: true },
    },
    layout: {
      control: { type: 'inline-radio' },
      options: ['vertical', 'horizontal'],
    },
    dense: {
      control: { type: 'boolean' },
    },
    items: {
      control: { type: 'object' },
    },
  },
};

export { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';
export { WithMediumLegend } from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';
export { MultipleQuestions } from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';
export { Inline } from '@digigov/ui/form/RadioContainer/__stories__/Inline';
export { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
export { NoneAnswer } from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
export { WithErrorMessage } from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
export { ConditionalReveal } from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
export { InlineWithDivider } from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
export { Dense } from '@digigov/ui/form/RadioContainer/__stories__/Dense';