import {
  argsToTemplate,
  moduleMetadata,
  type Meta,
  type StoryObj,
} from '@storybook/angular';
import { QuantityControlComponent } from '@isa/shared/quantity-control';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

interface QuantityControlStoryProps {
  value: number;
  disabled: boolean;
  min?: number;
  max?: number;
  presetLimit?: number;
}

const meta: Meta<QuantityControlStoryProps> = {
  component: QuantityControlComponent,
  title: 'shared/quantity-control/QuantityControl',
  argTypes: {
    value: {
      control: { type: 'number', min: 0, max: 99 },
      description: 'The quantity value',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables the control when true',
    },
    min: {
      control: { type: 'number', min: 0, max: 10 },
      description: 'Minimum selectable value',
    },
    max: {
      control: { type: 'number', min: 1, max: 99 },
      description: 'Maximum selectable value (e.g., stock available)',
    },
    presetLimit: {
      control: { type: 'number', min: 1, max: 99 },
      description: 'Number of preset options before requiring Edit',
    },
  },
  args: {
    value: 1,
    disabled: false,
    min: 1,
    max: undefined,
    presetLimit: 10,
  },
  render: (args) => ({
    props: args,
    template: `<shared-quantity-control ${argsToTemplate(args)} />`,
  }),
};

export default meta;

type Story = StoryObj<QuantityControlStoryProps>;

export const Default: Story = {
  args: {
    value: 1,
    disabled: false,
  },
};

export const WithCustomValue: Story = {
  args: {
    value: 5,
    disabled: false,
  },
};

export const HighStock: Story = {
  args: {
    value: 15,
    disabled: false,
    min: 1,
    max: 50,
    presetLimit: 20, // Shows 1-20, Edit for 21-50
  },
};

export const LimitedStock: Story = {
  args: {
    value: 3,
    disabled: false,
    min: 1,
    max: 5,
    presetLimit: 10, // Shows 1-5 (capped at max), no Edit
  },
};

export const ExactStock: Story = {
  args: {
    value: 1,
    disabled: false,
    min: 1,
    max: 10,
    presetLimit: 10, // Shows 1-10, no Edit (max=10 == presetLimit)
  },
};

export const StartFromZero: Story = {
  args: {
    value: 0,
    disabled: false,
    min: 0,
    max: undefined,
    presetLimit: 10, // Shows 0-9, Edit for unlimited
  },
};

export const Disabled: Story = {
  args: {
    value: 3,
    disabled: true,
  },
};

export const InFormContext: Story = {
  args: {
    value: 2,
    disabled: false,
  },
  decorators: [
    moduleMetadata({
      imports: [ReactiveFormsModule],
    }),
  ],
  render: (args) => ({
    props: {
      ...args,
      quantityControl: new FormControl(args.value),
    },
    template: `
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <shared-quantity-control [formControl]="quantityControl" />
        <div style="margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
          <strong>Form Value:</strong> {{ quantityControl.value }}
        </div>
      </div>
    `,
  }),
};