import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { generateSvgPlaceholder } from '../../../utils/storybook';

import { ImageSelect, type ImageSelectProps } from './ImageSelect';

interface ImageOption {
  id: string;
  label: string;
  src: string;
  alt?: string;
}

const sampleOptions: ImageOption[] = [
  { id: 'product-a', label: 'Phone — Black', src: generateSvgPlaceholder(400, 260), alt: 'Phone in black' },
  { id: 'product-b', label: 'Phone — Silver', src: generateSvgPlaceholder(400, 260), alt: 'Phone in silver' },
  { id: 'product-c', label: 'Phone — Blue', src: generateSvgPlaceholder(400, 260), alt: 'Phone in blue' },
  { id: 'product-d', label: 'Phone — Gold', src: generateSvgPlaceholder(400, 260), alt: 'Phone in gold' },
];

const manyOptions: ImageOption[] = Array.from({ length: 20 }, (_, index) => ({
  id: `option-${index}`,
  label: `Option ${index + 1}`,
  src: generateSvgPlaceholder(400, 260),
}));

const optionsWithBroken: ImageOption[] = [
  { id: 'ok-1', label: 'Working image', src: generateSvgPlaceholder(400, 260) },
  { id: 'broken', label: 'Broken image', src: '/intentionally-missing-image.jpg' },
  { id: 'ok-2', label: 'Working image 2', src: generateSvgPlaceholder(400, 260) },
];

const meta: Meta<typeof ImageSelect<ImageOption, string>> = {
  title: 'UI kit/Form/Inputs/ImageSelect',
  component: ImageSelect,
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<ImageSelectProps<ImageOption, string>>;

const render = (props: ImageSelectProps<ImageOption, string>) => {
  const [value, setValue] = useState<string | null>(props.value ?? null);
  return <ImageSelect {...props} value={value} onChange={value => setValue(value)} />;
};

const baseArgs: Partial<ImageSelectProps<ImageOption, string>> = {
  options: sampleOptions,
  getOptionValue: option => option.id,
  getOptionLabel: option => option.label,
  getOptionImageSrc: option => option.src,
  getOptionImageAlt: option => option.alt ?? option.label,
};

export const Default: Story = {
  args: { ...baseArgs },
  render,
};

export const Filled: Story = {
  args: { ...baseArgs, value: 'product-b' },
  render,
};

export const Broken: Story = {
  args: { ...baseArgs, options: optionsWithBroken, value: 'broken' },
  render,
};

export const Disabled: Story = {
  args: { ...baseArgs, disabled: true, value: 'product-a' },
  render,
};

export const Loading: Story = {
  args: { ...baseArgs, value: 'product-c', loading: true },
  render,
};

export const ManyOptions: Story = {
  args: { ...baseArgs, options: manyOptions, modalMaxWidth: 'full' },
  render,
};

export const CustomMinColumnWidth: Story = {
  args: { ...baseArgs, options: manyOptions, minColumnWidth: 96 },
  render,
};

export const WithModalDescription: Story = {
  args: {
    ...baseArgs,
    modalDescription: 'Select the product image you would like to feature on the homepage.',
  },
  render,
};

export const CustomRender: Story = {
  args: {
    ...baseArgs,
    renderValue: option => (
      <div style={{ padding: '12px', background: '#f5f5f5', textAlign: 'center' }}>
        Custom preview: {option?.label ?? 'N/A'}
      </div>
    ),
  },
  render,
};