import {
  argsToTemplate,
  type Meta,
  type StoryObj,
  moduleMetadata,
} from '@storybook/angular';
import { EmptyStateAppearance, EmptyStateComponent } from '@isa/ui/empty-state';
import { ButtonComponent } from '@isa/ui/buttons';

type EmptyStateComponentInputs = {
  title: string;
  description: string;
  appearance: EmptyStateAppearance;
};

const meta: Meta<EmptyStateComponentInputs> = {
  component: EmptyStateComponent,
  title: 'ui/empty-state/EmptyState',
  decorators: [
    moduleMetadata({
      imports: [ButtonComponent],
    }),
  ],
  argTypes: {
    title: {
      control: 'text',
    },
    description: {
      control: 'text',
    },
    appearance: {
      control: 'select',
      options: Object.values(EmptyStateAppearance),
    },
  },
  render: (args) => ({
    props: args,
    template: `<ui-empty-state ${argsToTemplate(args)}>
      <ui-button color="secondary">Action A</ui-button>
      <ui-button>Action B</ui-button>
    </ui-empty-state>`,
  }),
};

export default meta;

type Story = StoryObj<EmptyStateComponent>;

export const Default: Story = {
  args: {
    title: 'Keine Suchergebnisse',
    description: 'Suchen Sie nach einer Rechnungsnummer oder Kundennamen.',
    appearance: EmptyStateAppearance.NoResults,
  },
};
