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

import {
  Card,
  CardHeading,
  CardContent,
  CardAction,
} from '@digigov/ui/content/Card';
import { Button } from '@digigov/ui/form/Button';
import { LinkBase } from '@digigov/ui/navigation/Link';

export default {
  title: 'Digigov UI/content/Card',
  tags: ['Experimental', 'autodocs'],
  description:
    'Cards can be used to divide and organise interface content for better understandability and readability',
  link: 'https://guide.services.gov.gr/docs/components/card',
  component: Card,
  markdown: doc,
  displayName: 'Card',
};

export const WithControls = {
  render: (args) => {
    return (
      <Card
        variant={args.variant}
        borderColor={args.borderColor}
        callToAction={args.callToAction}
        dense={args.dense}
        fullHeight={args.fullHeight}
      >
        <CardHeading>
          {args.callToAction || args.action === 'title' ? (
            <LinkBase href="#">{args.title} </LinkBase>
          ) : (
            args.title
          )}
        </CardHeading>
        <CardContent>{args.content}</CardContent>
        {args.action === 'button' && (
          <CardAction>
            <Button>Είσοδος</Button>
          </CardAction>
        )}
        {args.action === 'link' && (
          <CardAction>
            <LinkBase href="#">Περισσότερα</LinkBase>
          </CardAction>
        )}
      </Card>
    );
  },
  args: {
    title: 'Γεωργία και κτηνοτροφία',
    content:
      'Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή αλιευτική σας δραστηριότητα.',
    action: 'button',
    actionButtonText: 'Συνέχεια',
    actionButtonLink: 'Συνέχεια',
    variant: 'default',
    borderColor: 'light',
    callToAction: false,
    dense: false,
    fullHeight: false,
  },
  argTypes: {
    title: {
      control: { type: 'text' },
    },
    content: {
      control: { type: 'text' },
    },
    action: {
      options: ['button', 'link', 'title'],
      control: { type: 'select' },
    },
    actionButtonText: {
      control: { type: 'text' },
      if: { arg: 'action', eq: 'button' },
    },
    actionButtonLink: {
      control: { type: 'text' },
      if: { arg: 'action', eq: 'link' },
    },
    variant: {
      options: ['border', 'divider', 'border-top', 'default'],
      control: { type: 'select' },
    },
    borderColor: {
      options: ['light', 'dark'],
      control: { type: 'inline-radio' },
      if: { arg: 'variant', neq: 'default' },
    },
    callToAction: {
      control: { type: 'boolean' },
    },
    dense: {
      control: { type: 'boolean' },
    },
    fullHeight: {
      control: { type: 'boolean' },
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};
export { Default } from '@digigov/ui/content/Card/__stories__/Default';
export { WithGrayBorder } from '@digigov/ui/content/Card/__stories__/WithGrayBorder';
export { WithDarkBorder } from '@digigov/ui/content/Card/__stories__/WithDarkBorder';
export { WithGrayTopBorder } from '@digigov/ui/content/Card/__stories__/WithGrayTopBorder';
export { WithDarkTopBorder } from '@digigov/ui/content/Card/__stories__/WithDarkTopBorder';
export { WithDivider } from '@digigov/ui/content/Card/__stories__/WithDivider';
export { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
export { WithClickableLink } from '@digigov/ui/content/Card/__stories__/WithClickableLink';
export { WithGroupButton } from '@digigov/ui/content/Card/__stories__/WithGroupButton';
export { WithLink } from '@digigov/ui/content/Card/__stories__/WithLink';
export { Dense } from '@digigov/ui/content/Card/__stories__/Dense';