import { CommonModule } from '@angular/common';
import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { IconButtonComponent, SidepanelHeaderActionDirective, SidepanelHeaderComponent } from '../../public-api';

const meta: Meta<SidepanelHeaderComponent> = {
  title: 'Components/Sidepanel/Header',
  id: 'sidepanel-header',
  component: SidepanelHeaderComponent,
  decorators: [
    moduleMetadata({
      imports: [SidepanelHeaderActionDirective, IconButtonComponent, CommonModule]
    })
  ],
  parameters: {
    docs: {
      description: {
        component:
          'This component is designed to display a title, a close button, and some action buttons in a specific arrangement.'
      },
      imports: [IconButtonComponent, SidepanelHeaderActionDirective, SidepanelHeaderComponent]
    }
  },
  argTypes: {
    closeIconClicked: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<SidepanelHeaderComponent>;

export const Basic: Story = {
  args: {
    title: 'Title'
  }
};

export const WithCustomActions: Story = {
  args: {
    title: 'Title'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-sidepanel-header ${argsToTemplate(args)}>
        <nj-icon-button *njSidepanelHeaderAction icon="info"></nj-icon-button>
        <nj-icon-button *njSidepanelHeaderAction icon="more_horiz"></nj-icon-button>
    </nj-sidepanel-header>
    `
  })
};

export const WithCustomTitle: Story = {
  render: (args) => ({
    props: args,
    template: `
    <nj-sidepanel-header ${argsToTemplate(args)}>
    <div style="display: flex; align-items: center; gap: var(--nj-semantic-size-spacing-4)">
      <nj-icon-button icon="arrow_back"></nj-icon-button> Custom title
    </div>
    </nj-sidepanel-header>
    `
  })
};