import type { Meta, StoryObj } from '@storybook/html';
import { Clipboard, type ClipboardOptions, type ClipboardCopyEvent } from '@42/core/clipboard';
import { Toaster } from '@42/core/toast';
import '@42/styles/clipboard.css';
import '@42/styles/toast.css';

const snippet = `import { Clipboard } from '@42/core/clipboard';
import { Toaster } from '@42/core/toast';
import '@42/styles/clipboard.css';
import '@42/styles/toast.css';

const toaster = new Toaster(document.querySelector('[data-c42-toast-region]')!, {
  position: 'bottom-right',
});

const cb = new Clipboard(document.querySelector('[data-c42-clipboard]')!);

// Compose the two headless components: toast = visible copy feedback.
cb.on('clipboard:copy', (e) =>
  toaster.show({ variant: 'success', title: 'Copied!', description: e.detail.text }),
);
cb.on('clipboard:error', () =>
  toaster.show({ variant: 'error', title: 'Copy failed' }),
);`;

const meta: Meta<ClipboardOptions> = {
  title: 'Core/Feedback & Status/Clipboard',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    text: { control: 'text' },
    timeout: { control: { type: 'number', min: 200, step: 200 } },
  },
  args: {
    timeout: 2000,
  },
  render: (args) => {
    const wrapper = document.createElement('div');

    const root = document.createElement('div');
    root.dataset.c42Clipboard = '';
    root.innerHTML = `
      <input data-c42-clipboard-source value="npm i @42/core" readonly size="18" />
      <button data-c42-clipboard-trigger>
        <span data-c42-clipboard-copy>Copy</span>
        <span data-c42-clipboard-copied hidden>Copied!</span>
      </button>`;

    // Toast region for visible copy feedback.
    const region = document.createElement('div');
    region.dataset.c42ToastRegion = '';
    const toaster = new Toaster(region, { position: 'bottom-right' });

    const clipboard = new Clipboard(root, args);
    clipboard.on<ClipboardCopyEvent>('clipboard:copy', (e) =>
      toaster.show({
        variant: 'success',
        title: 'Copied to clipboard',
        description: e.detail.text,
        duration: 2500,
      }),
    );
    clipboard.on('clipboard:error', () =>
      toaster.show({ variant: 'error', title: 'Copy failed', duration: 2500 }),
    );

    wrapper.append(root, region);
    return wrapper;
  },
};

export default meta;

type Story = StoryObj<ClipboardOptions>;

export const Default: Story = {};

export const ExplicitText: Story = {
  args: { text: 'Hello from @42-components' },
};

export const FastFeedback: Story = {
  args: { timeout: 800 },
};