import type { Meta, StoryObj } from '@storybook/html';
import { Skeleton, type SkeletonOptions } from '@42/core/skeleton';
import '@42/styles/skeleton.css';

const snippet = `import { Skeleton } from '@42/core/skeleton';

const skeleton = new Skeleton(document.querySelector('[data-c42-skeleton-region]')!, {
  loading: true,
});
// when data arrives:
skeleton.setLoading(false);`;

const meta: Meta<SkeletonOptions> = {
  title: 'Core/Feedback & Status/Skeleton',
  tags: ['autodocs'],
  parameters: {
    docs: { source: { code: snippet, language: 'ts' } },
  },
  argTypes: {
    loading: { control: 'boolean' },
  },
  args: {
    loading: true,
  },
  render: (args) => {
    const wrap = document.createElement('div');
    wrap.style.maxWidth = '20rem';

    const region = document.createElement('div');
    region.dataset.c42SkeletonRegion = '';
    region.innerHTML = `
      <div data-c42-skeleton-placeholder>
        <span data-c42-skeleton data-variant="circle"></span>
        <span data-c42-skeleton data-variant="text" style="width: 80%"></span>
        <span data-c42-skeleton data-variant="text" style="width: 60%"></span>
        <span data-c42-skeleton data-variant="rect"></span>
      </div>
      <div data-c42-skeleton-content hidden>
        <h3 style="margin: 0 0 .5rem">Jane Doe</h3>
        <p style="margin: 0">Content finished loading. This is the real component.</p>
      </div>`;
    wrap.appendChild(region);

    const skeleton = new Skeleton(region, args);

    const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.textContent = 'Toggle loading';
    toggle.style.marginTop = '1rem';
    toggle.addEventListener('click', () => skeleton.setLoading(!skeleton.loading));
    wrap.appendChild(toggle);

    return wrap;
  },
};

export default meta;

type Story = StoryObj<SkeletonOptions>;

export const Default: Story = {};

export const Loaded: Story = {
  args: { loading: false },
};