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

import { generateSvgPlaceholder } from '../../../utils/storybook';
import { RadioGroup } from '../../Inputs/RadioGroup/RadioGroup';
import { DateField } from '../DateField/DateField';

import { RadioField, type RadioFieldProps } from './RadioField';

interface PlanOption {
  id: string;
  name: string;
  description?: string;
  disabled?: boolean;
}

interface ImageOption {
  id: string;
  name: string;
  src: string;
}

const squareImageOptions: ImageOption[] = [
  { id: 'black', name: 'Black', src: generateSvgPlaceholder(200, 200) },
  { id: 'silver', name: 'Silver', src: generateSvgPlaceholder(200, 200) },
  { id: 'blue', name: 'Blue', src: generateSvgPlaceholder(200, 200) },
];

const landscapeImageOptions: ImageOption[] = [
  { id: 'mountain', name: 'Mountain', src: generateSvgPlaceholder(400, 200) },
  { id: 'ocean', name: 'Ocean', src: generateSvgPlaceholder(400, 200) },
  { id: 'forest', name: 'Forest', src: generateSvgPlaceholder(400, 200) },
];
const planOptions: PlanOption[] = [
  { id: 'free', name: 'Free Plan' },
  { id: 'pro', name: 'Pro Plan', description: 'For growing businesses' },
  { id: 'business', name: 'Business Plan', description: 'For large organizations' },
];

const meta: Meta<RadioFieldProps> = {
  title: 'UI kit/Form/RadioField',
  component: RadioField,
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<RadioFieldProps<PlanOption, string | number>>;

const render = (props: RadioFieldProps) => {
  const [value, setValue] = useState<string | number | null>(props.value ?? null);
  const handleChange: RadioFieldProps<PlanOption, string | number>['onChange'] = newValue => {
    setValue(newValue);
  };
  return (
    <div className='v2form'>
      <RadioField {...props} value={value} onChange={handleChange} />
    </div>
  );
};

export const Default: Story = {
  args: {
    name: 'billingPlan',
    label: 'Choose your plan',
    required: true,
    options: planOptions,
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
    getOptionTooltip: option => option.description ?? '',
    disabledValues: ['business'],
  },
  render,
};

export const WithActions: Story = {
  args: {
    name: 'city',
    label: 'City',
    required: true,
    renderOption: (option, props) => (
      <RadioGroup.Option
        {...props}
        actionSlot={option.id === 'date' ? <DateField label='Select date' labelHidden /> : undefined}
      />
    ),
    options: [
      {
        id: 'today',
        name: 'Today',
      },
      {
        id: 'tomorrow',
        name: 'Tomorrow',
      },
      {
        id: 'date',
        name: 'Select date',
      },
    ],
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
  },
  render,
};

export const HiddenLabel: Story = {
  args: {
    name: 'city',
    label: 'City',
    required: true,
    options: [
      {
        id: 'prague',
        name: 'Prague',
      },
      {
        id: 'brno',
        name: 'Brno',
      },
      {
        id: 'other',
        name: 'Other',
      },
    ],
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
  },
  render,
};

export const WithHint: Story = {
  args: {
    name: 'car',
    label: 'Car',
    required: true,
    hint: 'Hint: Please select your favorite car',
    options: [
      {
        id: 'sedan',
        name: 'Sedan',
      },
      {
        id: 'suv',
        name: 'SUV',
      },
      {
        id: 'other',
        name: 'Other',
      },
    ],
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
    getOptionTooltip: option => option.description ?? '',
  },
  render,
};

export const WithWarning: Story = {
  args: {
    name: 'animal',
    label: 'Animal',
    required: true,
    warning: 'Warning: Please check your selection',
    options: [
      {
        id: 'dog',
        name: 'Dog',
      },
      {
        id: 'cat',
        name: 'Cat',
      },
      {
        id: 'other',
        name: 'Other',
      },
    ],
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
  },
  render,
};

export const InvalidWithError: Story = {
  args: {
    name: 'gender',
    label: 'Gender',
    required: true,
    error: 'This field is required',
    options: [
      { id: 'male', name: 'Male' },
      { id: 'female', name: 'Female' },
      { id: 'other', name: 'Other' },
    ],
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
    getOptionTooltip: option => option.description ?? '',
  },
  render,
};

export const Horizontal: Story = {
  args: {
    name: 'billingPlanHorizontal',
    label: 'Choose your plan',
    options: planOptions,
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
    orientation: 'horizontal',
  },
  render,
};

export const WithImageOptions: StoryObj<RadioFieldProps<ImageOption, string>> = {
  render: () => {
    const [value, setValue] = useState<string | null>('mountain');

    return (
      <div className='v2form'>
        <RadioField
          name='landscapeImage'
          label='Choose scenery'
          value={value}
          onChange={setValue}
          options={landscapeImageOptions}
          getOptionValue={option => option.id}
          getOptionLabel={option => option.name}
          orientation='horizontal'
          gap='md'
          renderOption={(option, props) => <RadioGroup.ImageOption {...props} src={option.src} aspectRatio='4 / 2' />}
        />
      </div>
    );
  },
};

export const WithVerticalImageOptions: StoryObj<RadioFieldProps<ImageOption, string>> = {
  render: () => {
    const [value, setValue] = useState<string | null>('black');

    return (
      <div className='v2form'>
        <RadioField
          name='verticalImage'
          label='Choose color'
          value={value}
          onChange={setValue}
          options={squareImageOptions}
          getOptionValue={option => option.id}
          getOptionLabel={option => option.name}
          renderOption={(option, props) => <RadioGroup.ImageOption {...props} src={option.src} aspectRatio={1} />}
        />
      </div>
    );
  },
};

const manyImageOptions: ImageOption[] = Array.from({ length: 12 }, (_, i) => ({
  id: `option-${i + 1}`,
  name: `Option ${i + 1}`,
  src: generateSvgPlaceholder(200, 200),
}));

export const WithImageOptionsGrid: StoryObj<RadioFieldProps<ImageOption, string>> = {
  render: () => {
    const [value, setValue] = useState<string | null>('option-1');

    return (
      <div className='v2form'>
        <RadioField
          name='imageGrid'
          label='Choose option'
          value={value}
          onChange={setValue}
          options={manyImageOptions}
          getOptionValue={option => option.id}
          getOptionLabel={option => option.name}
          layout='grid'
          renderOption={(option, props) => <RadioGroup.ImageOption {...props} src={option.src} size='full' />}
        />
      </div>
    );
  },
};

export const WithImageOptionsError: StoryObj<RadioFieldProps<ImageOption, string>> = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);

    return (
      <div className='v2form'>
        <RadioField
          name='imageError'
          label='Choose color'
          value={value}
          onChange={setValue}
          options={squareImageOptions}
          getOptionValue={option => option.id}
          getOptionLabel={option => option.name}
          orientation='horizontal'
          gap='md'
          error='Please select an option'
          renderOption={(option, props) => <RadioGroup.ImageOption {...props} src={option.src} />}
        />
      </div>
    );
  },
};

export const WithImageOptionsWarning: StoryObj<RadioFieldProps<ImageOption, string>> = {
  render: () => {
    const [value, setValue] = useState<string | null>('black');

    return (
      <div className='v2form'>
        <RadioField
          name='imageWarning'
          label='Choose color'
          value={value}
          onChange={setValue}
          options={squareImageOptions}
          getOptionValue={option => option.id}
          getOptionLabel={option => option.name}
          orientation='horizontal'
          gap='md'
          warning='This selection may affect your order'
          renderOption={(option, props) => <RadioGroup.ImageOption {...props} src={option.src} />}
        />
      </div>
    );
  },
};