import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
import { CarouselComponent } from '@isa/ui/carousel';
import { QuoteCardComponent } from './quote-card.component';

// Collection of developer/inspirational quotes
const quotes = [
  { id: 1, text: 'Code is like humor. When you have to explain it, it\'s bad.', author: 'Cory House' },
  { id: 2, text: 'First, solve the problem. Then, write the code.', author: 'John Johnson' },
  { id: 3, text: 'Simplicity is the soul of efficiency.', author: 'Austin Freeman' },
  { id: 4, text: 'Make it work, make it right, make it fast.', author: 'Kent Beck' },
  { id: 5, text: 'Clean code always looks like it was written by someone who cares.', author: 'Robert C. Martin' },
  { id: 6, text: 'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.', author: 'Martin Fowler' },
  { id: 7, text: 'Experience is the name everyone gives to their mistakes.', author: 'Oscar Wilde' },
  { id: 8, text: 'In order to be irreplaceable, one must always be different.', author: 'Coco Chanel' },
  { id: 9, text: 'The best way to predict the future is to invent it.', author: 'Alan Kay' },
  { id: 10, text: 'Programs must be written for people to read, and only incidentally for machines to execute.', author: 'Harold Abelson' },
  { id: 11, text: 'Testing leads to failure, and failure leads to understanding.', author: 'Burt Rutan' },
  { id: 12, text: 'It\'s not a bug – it\'s an undocumented feature.', author: 'Anonymous' },
  { id: 13, text: 'Software is a great combination between artistry and engineering.', author: 'Bill Gates' },
  { id: 14, text: 'Talk is cheap. Show me the code.', author: 'Linus Torvalds' },
  { id: 15, text: 'Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging Monday\'s code.', author: 'Dan Salomon' },
];

// Helper function to generate a specified number of quotes
function generateQuotes(count: number) {
  const result = [];
  for (let i = 0; i < count; i++) {
    result.push(quotes[i % quotes.length]);
  }
  return result;
}

interface CarouselStoryProps {
  gap: string;
  arrowAutoHide: boolean;
  itemCount: number;
}

const meta: Meta<CarouselStoryProps> = {
  component: CarouselComponent,
  title: 'ui/carousel/Carousel',
  decorators: [
    moduleMetadata({
      imports: [QuoteCardComponent],
    }),
  ],
  argTypes: {
    gap: {
      control: 'text',
      description: 'CSS gap value for spacing between carousel items',
    },
    arrowAutoHide: {
      control: 'boolean',
      description: 'Whether to auto-hide arrows until carousel is hovered or focused',
    },
    itemCount: {
      control: { type: 'number', min: 3, max: 20 },
      description: 'Number of quote cards to render',
    },
  },
  args: {
    gap: '1rem',
    arrowAutoHide: true,
    itemCount: 6,
  },
  render: (args) => ({
    props: {
      ...args,
      quotes: generateQuotes(args.itemCount),
    },
    template: `
      <div style="padding: 2.5rem; background: #f5f5f5;">
        <ui-carousel
          [gap]="gap"
          [arrowAutoHide]="arrowAutoHide"
        >
          @for (quote of quotes; track quote.id) {
            <quote-card [quote]="quote.text" [author]="quote.author"></quote-card>
          }
        </ui-carousel>
      </div>
    `,
  }),
};

export default meta;

type Story = StoryObj<CarouselStoryProps>;

/**
 * Default carousel with 6 quote cards.
 * Demonstrates basic horizontal scrolling with auto-hide arrows.
 */
export const Default: Story = {
  args: {
    itemCount: 6,
  },
};

/**
 * Carousel with many items (15 cards).
 * Shows behavior with extensive scrolling and tests navigation performance.
 */
export const ManyItems: Story = {
  args: {
    itemCount: 15,
  },
};

/**
 * Carousel with few items (3 cards).
 * Demonstrates behavior when content might not overflow.
 * Arrows should disable if not scrollable.
 */
export const FewItems: Story = {
  args: {
    itemCount: 3,
  },
};

/**
 * Carousel with persistent arrows (no auto-hide).
 * Arrows are always visible when content is scrollable.
 */
export const AlwaysShowArrows: Story = {
  args: {
    itemCount: 8,
    arrowAutoHide: false,
  },
};

/**
 * Carousel with custom gap spacing (2rem).
 * Demonstrates configurable spacing between items.
 */
export const CustomGap: Story = {
  args: {
    itemCount: 6,
    gap: '2rem',
  },
};
