import React from 'react';
import doc from './doc.mdx?raw';
import { Paragraph } from '@digigov/ui/typography/Paragraph';
import {
  Modal,
  ModalHeading,
  ModalContent,
  ModalAction,
} from '@digigov/ui/app/Modal';
import Button from '@digigov/ui/form/Button';

export default {
  title: 'Digigov UI/app/Modal',
  description:
    'Use the modal component with caution when you need to provide critical information or ask for a decision.',
  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
  component: Modal,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Modal',
};

export const WithControls = {
  render: (args) => {
    return (
      <Modal
        open={true}
        aria-labelledby="modal-label"
        dense={args.dense}
        gaps={args.gaps}
      >
        <ModalHeading id="modal-label">Διαγραφή τηλεφώνου</ModalHeading>
        <ModalContent>
          <Paragraph mb={args.gaps ? 0 : 4}>
            Είστε σίγουροι ότι θέλετε να διαγράψετε τον αριθμό τηλεφώνου; Αυτή η
            ενέργεια είναι οριστική.
          </Paragraph>
        </ModalContent>
        <ModalAction>
          <Button>Διαγραφή</Button>
          <Button variant="link">Ακύρωση</Button>
        </ModalAction>
      </Modal>
    );
  },
  args: {
    dense: false,
    gaps: true,
  },
  argsTypes: {
    dense: {
      control: 'boolean',
    },
    gaps: {
      control: 'boolean',
    },
  },
};
export { Default } from '@digigov/ui/app/Modal/__stories__/Default';
export { AlertDialog } from '@digigov/ui/app/Modal/__stories__/AlertDialog';
export { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
export { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
export { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';
export { WithoutModalGaps } from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';