import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import {
  StoryObj,
  Meta,
  moduleMetadata,
  applicationConfig,
} from '@storybook/angular';
import {
  ChecklistComponent,
  ChecklistValueDirective,
  CheckboxComponent,
  CheckboxAppearance,
} from '@isa/ui/input-controls';
import { provideAnimations } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';

interface ChecklistStoryProps {
  values: string[];
  options: string[];
  disabled: boolean;
  appearance: CheckboxAppearance;
}

const meta: Meta<ChecklistStoryProps> = {
  title: 'ui/input-controls/Checklist',
  component: ChecklistComponent,
  decorators: [
    moduleMetadata({
      imports: [
        FormsModule,
        ReactiveFormsModule,
        CheckboxComponent,
        ChecklistValueDirective,
      ],
    }),
    applicationConfig({
      providers: [
        importProvidersFrom(FormsModule, ReactiveFormsModule),
        provideAnimations(),
      ],
    }),
  ],
  argTypes: {
    values: {
      control: 'object',
      description: 'Array of pre-selected values',
    },
    options: {
      control: 'object',
      description: 'Available options for the checklist',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the checklist is disabled',
    },
    appearance: {
      control: 'select',
      options: Object.values(CheckboxAppearance),
      description: 'The appearance style of the checkboxes',
    },
  },
  args: {
    values: ['Option 1', 'Option 3'],
    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
    disabled: false,
    appearance: CheckboxAppearance.Checkbox,
  },
  render: (args) => ({
    props: {
      ...args,
      selectedValues: [...args.values],
    },
    template: `
      <div class="p-4">
        <h3 class="mb-2 font-medium">Selected values: {{ selectedValues | json }}</h3>
        <ui-checklist [(ngModel)]="selectedValues" [disabled]="disabled">
            <label *ngFor="let option of options" class="ui-checkbox-label flex items-center gap-2">
              <ui-checkbox [appearance]="appearance">
                <input type="checkbox" [uiChecklistValue]="option" />
              </ui-checkbox>
              {{ option }}
            </label>
        </ui-checklist>
      </div>
    `,
  }),
  parameters: {
    docs: {
      description: {
        component: `
          The Checklist component manages a group of checkboxes as a form control.
          It can be used with both template-driven and reactive forms.
        `,
      },
    },
  },
};

export default meta;
type Story = StoryObj<ChecklistStoryProps>;

// Basic example with ngModel
export const Default: Story = {};

// Example with bullet appearance
export const BulletAppearance: Story = {
  args: {
    appearance: CheckboxAppearance.Bullet,
  },
};
