import { type Meta, type StoryObj, argsToTemplate, moduleMetadata } from '@storybook/angular';
import { ToolbarComponent, ToolbarSize } from '@isa/ui/toolbar';
import { TextButtonComponent } from '@isa/ui/buttons';

const meta: Meta<ToolbarComponent> = {
  component: ToolbarComponent,
  decorators: [
    moduleMetadata({
      imports: [TextButtonComponent],
    }),
  ],
  title: 'ui/toolbar/Toolbar',
  argTypes: {
    size: {
      control: 'select',
      options: Object.values(ToolbarSize),
    },
  },
  args: {},
};

export default meta;

type Story = StoryObj<ToolbarComponent>;

export const Sortbar: Story = {
  args: {},
  render: (args) => ({
    props: args,
    template: `<ui-toolbar ${argsToTemplate(args)}>
          <span class="text-isa-neutral-600 isa-text-body-1-regular">Sortieren</span>
          <div class="flex-grow"></div>
          <button uiTextButton>Belegdatum</button>
          <button uiTextButton>Email</button>
          <button uiTextButton>Name</button>
          <button uiTextButton>PLZ</button>
      </ui-toolbar>`,
  }),
};

export const SmallToolbar: Story = {
  args: {
    size: 'small',
  },
  render: (args) => ({
    props: args,
    template: `<ui-toolbar ${argsToTemplate(args)}>
          <span class="isa-text-body-2-bold">2 Artikel</span>
          <span class="isa-text-body-2-bold">18.10.2024</span>
          <span class="isa-text-body-2-regular">562831968883788</span>
          <div class="flex-grow"></div>
          <button uiTextButton color="strong">Alle auswählen</button>
      </ui-toolbar>`,
  }),
};
