import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { Card } from '../card';
import { Collapsible, CollapsibleTrigger } from './collapsible';

const meta: Meta<typeof CollapsibleTrigger> = {
  title: 'Components/Collapsible',
  component: CollapsibleTrigger,
  argTypes: {
    arrowPosition: {
      options: ['right', 'left', undefined],
      description: 'Trigger prop to control arrow visibility and position',
      defaultValue: undefined,
      control: {
        type: 'select',
      },
    },
  },
};
export default meta;
type Story = StoryObj<typeof CollapsibleTrigger>;

export const Example: Story = {
  args: {
    arrowPosition: 'right',
  },
  render: args => (
    <Card style={{ padding: 0 }}>
      <Collapsible.Root>
        <div style={{ cursor: 'pointer', padding: '32px' }}>
          <Collapsible.Trigger arrowPosition={args.arrowPosition}>
            <div>Expand</div>
          </Collapsible.Trigger>
        </div>
        <Collapsible.Content>
          <p style={{ padding: '0 32px' }}>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui sem, fermentum vitae, sagittis id,
            malesuada in, quam. Cras elementum. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel
            sapien. Ut tempus purus at lorem. Pellentesque ipsum. Sed elit dui, pellentesque a, faucibus vel, interdum
            nec, diam. Maecenas sollicitudin. Praesent id justo in neque elementum ultrices. Etiam neque. Integer
            tempor. Fusce nibh.
          </p>
        </Collapsible.Content>
      </Collapsible.Root>
    </Card>
  ),
};

export const Controlled = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Collapsible.Root open={isOpen} onOpenChange={o => setIsOpen(o)}>
      <Collapsible.Trigger>Click me</Collapsible.Trigger>
      <Collapsible.Content>
        <div>Content</div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
};
