import React from 'react';
import doc from './doc.mdx?raw';
import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
import { Button } from '@digigov/ui/form/Button';

export default {
  title: 'Digigov UI/feedback/CopyToClipboard',
  component: CopyToClipboard,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'CopyToClipboard',
};

export const WithControls = {
  render: (args) => {
    return (
      <CopyToClipboard
        text={args.text}
        variant={args.variant}
        tooltipAlign={args.tooltipAlign}
        dense={args.dense}
        message={args.message}
        id={args.id}
        onCopy={() => {
          console.log('content copied!');
        }}
      >
        <Button color="secondary" aria-describedby="copy-to-clipboard">
          Αντιγραφή
        </Button>
      </CopyToClipboard>
    );
  },
  args: {
    text: 'copied-text',
    variant: 'tooltip',
    tooltipAlign: 'left',
    dense: false,
    message: 'Αντιγράφηκε στο πρόχειρο',
    id: 'copy-to-clipboard',
  },
  argTypes: {
    text: {
      control: { type: 'text' },
    },
    variant: {
      options: ['tooltip', 'banner'],
      control: { type: 'select' },
    },
    tooltipAlign: {
      options: ['left', 'right'],
      control: { type: 'select' },
      if: { arg: 'variant', eq: 'tooltip' },
    },
    dense: {
      control: { type: 'boolean' },
      if: { arg: 'variant', eq: 'tooltip' },
    },
    message: {
      control: { type: 'text' },
    },
    id: {
      control: { type: 'text' },
    },
  },
  parameters: {
    controls: { exclude: ['timeout', 'ref'] },
  },
};

export { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
export { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
export { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';