import React from 'react';
import doc from './doc.mdx?raw';

import {
  Accordion,
  AccordionSection,
  AccordionSectionContent,
  AccordionSectionSummary,
  AccordionSectionSummaryHeading,
} from '@digigov/ui/content/Accordion';
import { Hint } from '@digigov/ui/typography/Hint';
import { Paragraph } from '@digigov/ui/typography/Paragraph';

export default {
  title: 'Digigov UI/content/Accordion',
  tags: ['Experimental', 'autodocs'],
  description:
    'The accordion component lets users show and hide sections of related content on a page.',
  link: 'https://guide.services.gov.gr/docs/components/accordion',
  component: Accordion,
  markdown: doc,
  displayName: 'Accordion',
};

export const WithControls = {
  render: (args) => {
    return (
      <Accordion
        horizontalBorders={args.horizontalBorders}
        summaryColor={args.summaryColor}
        dense={args.dense}
      >
        <AccordionSection open>
          <AccordionSectionSummary>
            <AccordionSectionSummaryHeading
              aria-controls="content1"
              variant={args.variant}
            >
              {args.title}
            </AccordionSectionSummaryHeading>
            {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
          </AccordionSectionSummary>
          <AccordionSectionContent id="content1">
            <Paragraph>{args.content}</Paragraph>
          </AccordionSectionContent>
        </AccordionSection>
      </Accordion>
    );
  },
  args: {
    title: 'Διαφορές με το δημόσιο',
    variant: 'default',
    hint: true,
    hintMessage:
      'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
    content:
      'Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.',
    horizontalBorders: 'top',
    summaryColor: 'primary',
    dense: false,
  },
  argTypes: {
    title: {
      control: { type: 'text' },
    },
    variant: {
      options: ['default', 'arrows'],
      control: { type: 'select' },
    },
    hint: {
      control: { type: 'boolean' },
    },
    hintMessage: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    content: {
      control: { type: 'text' },
    },
    horizontalBorders: {
      options: ['none', 'top', 'bottom'],
      control: { type: 'select' },
    },
    summaryColor: {
      options: ['primary', 'secondary'],
      control: { type: 'select' },
    },
    dense: {
      control: { type: 'boolean' },
    },
  },
};

export { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
export { SummaryColorSecondary } from '@digigov/ui/content/Accordion/__stories__/SummaryColorSecondary';
export { UsingArrowIcons } from '@digigov/ui/content/Accordion/__stories__/UsingArrowIcons';
export { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
export { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
export { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';