import React from 'react';
import doc from './doc.mdx?raw';
import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';

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/Checkbox',
  description:
    'Let users select one or more options by using the checkboxes component.',
  link: 'https://guide.services.gov.gr/docs/components/checkboxes',
  component: Checkbox,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Checkbox',
};
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>
          )}
          <Checkbox layout={args.layout} dense={args.dense}>
            {args.items.map((item) => (
              <CheckboxItem
                key={item.value}
                name={args.fieldsetName}
                value={item.value}
                dividerText={item.dividerText}
              >
                {item.label}
              </CheckboxItem>
            ))}
          </Checkbox>
        </Fieldset>
      </FieldContainer>
    );
  },
  args: {
    legend: 'Πώς αισθάνεται αυτή τη στιγμή;',
    legendSize: 'lg',
    singleQuestionInPage: true,
    fieldsetName: 'feeling',
    hint: true,
    hintMessage:
      'Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.',
    hintId: 'feeling-hint',
    error: false,
    errorMessage: 'Επιλέξτε μία ή παραπάνω επιλογές.',
    errorId: 'feeling-error',
    layout: 'vertical',
    dense: false,
    items: [
      {
        value: 'cold',
        label: 'Έχω συνάχι',
        dividerText: undefined,
      },
      {
        value: 'fever',
        label: 'Έχω πυρετό',
        dividerText: undefined,
      },
      {
        value: 'good',
        label: 'Αισθάνομαι καλά',
        dividerText: 'ή',
      },
    ],
  },
  argTypes: {
    legend: {
      control: { type: 'text' },
    },
    legendSize: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'radio' },
    },
    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: {
      options: ['horizontal', 'vertical'],
      control: { type: 'radio' },
    },
    dense: {
      control: { type: 'boolean' },
    },
    items: {
      control: { type: 'array' },
    },
  },
  parameters: {
    controls: {
      exclude: ['ref'],
    },
  },
};

export { Default } from '@digigov/ui/form/Checkbox/__stories__/Default';
export { Inline } from '@digigov/ui/form/Checkbox/__stories__/Inline';
export { InlineWithDivider } from '@digigov/ui/form/Checkbox/__stories__/InlineWithDivider';
export { MultipleQuestions } from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
export { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
export { NoneAnswer } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
export { NoneAnswerWithError } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
export { WithErrorMessage } from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
export { ConditionalReveal } from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
export { Dense } from '@digigov/ui/form/Checkbox/__stories__/Dense';