import { Component, Input } from '@angular/core';
import { ButtonComponent } from '@isa/ui/buttons';
import { ExpandableDirectives } from '@isa/ui/expandable';
import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';

@Component({
  selector: 'app-expandable-directives',
  template: `
    <div uiExpandable [(uiExpandable)]="isExpanded" class="border border-black">
      <button uiButton uiExpandableTrigger>Toggle</button>
      <div class="bg-red-200" *uiExpanded>Expanded Content</div>
      <div class="bg-blue-200" *uiCollapsed>Collapsed Content</div>
    </div>
  `,
  standalone: true,
  imports: [ExpandableDirectives, ButtonComponent],
})
class ExpandableDirectivesComponent {
  @Input()
  isExpanded = false;
}

const meta: Meta<ExpandableDirectivesComponent> = {
  title: 'ui/expandable/Expandable',
  component: ExpandableDirectivesComponent,
  argTypes: {
    isExpanded: {
      control: 'boolean',
      description: 'Controls the expanded state of the section',
      table: {
        defaultValue: { summary: 'false' },
      },
    },
  },
  args: {
    isExpanded: false,
  },
  render: (args) => ({
    props: args,
    template: `<app-expandable-directives ${argsToTemplate(args)}></app-expandable-directives>`,
  }),
};
export default meta;

type Story = StoryObj<ExpandableDirectivesComponent>;

export const Default: Story = {
  args: {},
};
