import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
import { ThemeWrapper } from './lib/helpers';

export default {
  title: 'Delphinus/Content Toggle',
  component: AUContentToggleComponent,
  argTypes: {
    toggled: {
      table: {
        disable: true,
      }
    },     
    children: {
      table: {
        disable: true,
      }
    }, 
    classNames: {
      table: {
        disable: true,
      }
    },
    onClick: {
      table: {
        disable: true,
      }
    },
    beforeCallback: {
      table: {
        disable: true,
      }
    },
    afterCallback: {
      table: {
        disable: true,
      }
    },    
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUContentToggleComponent>;

type Story = StoryObj<typeof AUContentToggleComponent>;

export const Hidden_when_loaded: Story = {
  args: {
    toggled: false,
    children: (
      <div className="box theme--background-secondary box--constrain-width">
        <button className="content-toggle__toggle button button--small" aria-expanded="false">
          Very interesting content is hidden
        </button>
        <div className="content-toggle__content vertical-spacing-top" hidden>
          <h4 className="text--label-header text--pull">The content that is toggled</h4>
          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
        </div>
      </div>
    ),
  },
  render: (args) => <AUContentToggleComponent {...args} />,
};

export const Shown_when_loaded: Story = {
  args: {
    toggled: true,
    children: (
      <div className="box theme--background-secondary box--constrain-width">
        <button className="content-toggle__toggle button button--small" aria-expanded="true">
          Very interesting content is hidden
        </button>
        <div className="content-toggle__content vertical-spacing-top">
          <h4 className="text--label-header text--pull">The content that is toggled</h4>
          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
        </div>
      </div>
    ),
  },
  render: (args) => <AUContentToggleComponent {...args} />,
};