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

import { Strong } from '../../Typography/Strong/Strong';
import { Text } from '../../Typography/Text/Text';

import citiesFixture from './fixtures/cities.json';
import fruitsFixture from './fixtures/fruits.json';
import type { SingleSelectFieldProps } from './SingleSelectField';
import { SingleSelectField } from './SingleSelectField';

const { Option } = SingleSelectField;

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

export default meta;
type Story = StoryObj<typeof SingleSelectField>;

type CityOption = {
  id: string;
  name: string;
  country: string;
};

const cityOptions: Array<CityOption> = citiesFixture;

function getCityTextValue(option: CityOption) {
  return `${option.name}, ${option.country}`;
}

function getCityOption(query: string | null) {
  if (query === null || !query.trim()) {
    return cityOptions;
  }

  return cityOptions.filter(option => getCityTextValue(option).toLowerCase().includes(query.toLowerCase()));
}

const getOptionId = (option: { id: string }) => option.id;

const renderOption: SingleSelectFieldProps<CityOption>['renderOption'] = (
  option: CityOption,
  { screenSize: layoutSize }
) =>
  layoutSize === 'large' ? (
    <Option>
      <Option.Cell>
        <Strong>{option.name}</Strong>
        <Text>{option.country}</Text>
      </Option.Cell>
    </Option>
  ) : (
    <Option>
      <Option.Cell>
        <Strong>{option.name}</Strong>
      </Option.Cell>
      <Option.Cell>
        <Text align='right'>{option.country}</Text>
      </Option.Cell>
    </Option>
  );

function ControlledStory(args: Story['args']) {
  const [query, setQuery] = useState<string | null>(null);
  const [value, setValue] = useState<string | null>(null);

  return (
    <SingleSelectField<CityOption>
      {...(args as SingleSelectFieldProps<CityOption>)}
      name='selectCity'
      options={getCityOption(query)}
      value={value}
      getOptionValue={getOptionId}
      getOptionLabel={getCityTextValue}
      renderOption={renderOption}
      onChange={setValue}
      onQueryChange={value => setQuery(value)}
    />
  );
}

function UncontrolledStory(args: Story['args']) {
  return (
    <SingleSelectField<CityOption>
      {...(args as SingleSelectFieldProps<CityOption>)}
      getOptionValue={getOptionId}
      getOptionLabel={getCityTextValue}
      renderOption={renderOption}
      onChange={undefined}
    />
  );
}

export const Default: Story = {
  args: {
    label: 'Select city:',
    placeholder: 'Choose value...',
  },
  render: ControlledStory,
};

export const Uncontrolled: Story = {
  args: {
    label: 'Select city:',
    placeholder: 'Choose value...',
    options: cityOptions,
  },
  render: UncontrolledStory,
};

export const UncontrolledEmptyOptions: Story = {
  args: {
    label: 'Select city:',
    placeholder: 'Choose value...',
    options: [],
  },
  render: UncontrolledStory,
};

export const WithoutIcon: Story = {
  args: {
    label: 'Select city:',
    placeholder: 'Search...',
    icon: false,
  },
  render: ControlledStory,
};
WithoutIcon.storyName = 'Without icon';

export const SimpleFruitsSelect: Story = {
  args: {
    label: 'Search fruit:',
    placeholder: 'Choose value...',
  },
  render: ControlledStory,
};

type FruitOption = {
  id: string;
  name: string;
};
const fruitOptions: Array<FruitOption> = fruitsFixture;

function getFruitTextValue(option: FruitOption) {
  return option.name;
}
function getFruitOption(query: string | null) {
  if (query === null || !query.trim()) {
    return fruitOptions;
  }

  return fruitOptions.filter(option => getFruitTextValue(option).toLowerCase().includes(query.toLowerCase()));
}
const renderSimpleFruitOption = (option: FruitOption) => <Option>{option.name}</Option>;

function SimpleFruitsSelectStory(args: Story['args']) {
  const [query, setQuery] = useState<string | null>(null);
  const [value, setValue] = useState<string | null>(null);

  return (
    <SingleSelectField<FruitOption>
      {...(args as SingleSelectFieldProps<FruitOption>)}
      options={getFruitOption(query)}
      value={value}
      getOptionValue={getOptionId}
      getOptionLabel={getFruitTextValue}
      renderOption={renderSimpleFruitOption}
      onChange={setValue}
      onQueryChange={event => setQuery(event)}
    />
  );
}

export const SimpleSelect: Story = {
  args: {
    label: 'Select fruit:',
    placeholder: 'Choose value...',
  },
  render: SimpleFruitsSelectStory,
};

const nestedOptions = [
  {
    value: 'all',
    label: 'Flora',
  },
  {
    label: 'Fruits',
    options: [
      { value: 'apple', label: 'Apple' },
      { value: 'banana', label: 'Banana' },
      { value: 'orange', label: 'Orange' },
    ],
  },
  {
    label: 'Vegetables',
    options: [
      { value: 'carrot', label: 'Carrot' },
      { value: 'cucumber', label: 'Cucumber' },
      { value: 'tomato', label: 'Tomato' },
    ],
  },
];

type NestedStory = StoryObj<typeof SingleSelectField<{ value: string; label: string }>>;

const UncontrolledNestedStory = (args: NestedStory['args']) => {
  return (
    <SingleSelectField
      {...args}
      label='Select item:'
      options={nestedOptions}
      getOptionValue={option => option.value ?? option.label}
      getOptionLabel={option => option.label}
      getGroupOptions={option => option.options}
      renderOption={option => <Option>{option.label}</Option>}
    />
  );
};

export const NestedSelect: NestedStory = {
  args: {
    label: 'Select city:',
    placeholder: 'Choose value...',
  },
  render: UncontrolledNestedStory,
};

type ValueNumberStory = StoryObj<typeof SingleSelectField<{ value: number; label: string }, number>>;

const valueNumberOptions = [
  { value: 1, label: 'One' },
  { value: 2, label: 'Two' },
  { value: 3, label: 'Three' },
];

const UncontrolledValueNumberStory = (args: ValueNumberStory['args']) => {
  return (
    <SingleSelectField
      label='Select item:'
      {...args}
      options={valueNumberOptions}
      getOptionValue={option => option.value}
      getOptionLabel={option => option.label}
      renderOption={option => <Option>{option.label}</Option>}
    />
  );
};

export const ValueNumber: ValueNumberStory = {
  args: {
    label: 'Select item:',
    placeholder: 'Choose value...',
  },
  render: UncontrolledValueNumberStory,
};

const ControlledValueNumberStory = (args: ValueNumberStory['args']) => {
  const [value, setValue] = useState<number | null>(null);

  return (
    <SingleSelectField
      label='Select item:'
      {...args}
      options={valueNumberOptions}
      value={value}
      getOptionValue={option => option.value}
      getOptionLabel={option => option.label}
      renderOption={option => <Option>{option.label}</Option>}
      onChange={setValue}
    />
  );
};

export const ControlledValueNumber = {
  args: {
    label: 'Select item:',
    placeholder: 'Choose value...',
  },
  render: ControlledValueNumberStory,
};

type FruitType = 'apple' | 'banana' | 'orange';

type Fruit = {
  value: FruitType;
  label: string;
};

const valueStringUnionOptions: Fruit[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'orange', label: 'Orange' },
];

type ValueStringUnionStory = StoryObj<typeof SingleSelectField<Fruit, FruitType>>;

const UncontrolledValueStringUnionStory = (args: ValueStringUnionStory['args']) => {
  return (
    <SingleSelectField
      label='Select item:'
      {...args}
      options={valueStringUnionOptions}
      getOptionValue={option => option.value}
      getOptionLabel={option => option.label}
      renderOption={option => <Option>{option.label}</Option>}
    />
  );
};

export const ValueStringUnion: ValueStringUnionStory = {
  args: {
    label: 'Select item:',
    placeholder: 'Choose value...',
    onChange: value => {
      // Value is of type FruitType
      console.log('Selected value:', value);
    },
  },
  render: UncontrolledValueStringUnionStory,
};

export const NullableOption: Story = {
  args: {
    label: 'Select fruit:',
    placeholder: 'Choose value...',
    nullable: true,
  },
  render: SimpleFruitsSelectStory,
};