import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Person as ProfileIcon, Globe as GlobeIcon } from '@transferwise/icons';
import { useState } from 'react';
import Select, { SelectItem, SelectOptionItem } from './Select';

/**
 * @deprecated Use **`SelectInput`** instead <br/> [https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput](https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
 */
const meta: Meta<typeof Select> = {
  component: Select,
  title: 'Forms/Select',
  tags: ['deprecated'],
  argTypes: {
    id: { control: 'text' },
    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
    dropdownRight: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
    dropdownWidth: { control: 'radio', options: [undefined, 'sm', 'md', 'lg'] },
    placeholder: { control: 'text' },
    inverse: { control: 'boolean' },
    block: { control: 'boolean' },
    required: { control: 'boolean' },
    dropdownUp: { control: 'boolean' },
    disabled: { control: 'boolean' },
    search: { control: 'boolean' },
    searchPlaceholder: { control: 'text' },
    options: { control: false },
    selected: { control: false },
    onChange: { action: 'onChange' },
    onSearchChange: { action: 'onSearchChange' },
    searchValue: { control: false },
  },
};
export default meta;

type Story = StoryObj<typeof Select>;

const ImageIcon = () => (
  <img
    src="https://wise.com/public-resources/assets/recipients/alipay.png"
    alt="placeholder"
    style={{ marginRight: '8px' }}
  />
);

const isSelectOptionItem = (option: SelectItem | null): option is SelectOptionItem => {
  return option !== null && typeof option.value !== 'undefined';
};

export const Basic: Story = {
  args: {
    id: 'basic-button',
    size: 'md',
    placeholder: 'Placeholder text',
    dropdownRight: 'md',
    dropdownWidth: 'md',
    inverse: false,
    block: true,
    required: false,
    dropdownUp: false,
    disabled: false,
    search: true,
    searchPlaceholder: 'Search placeholder',
    options: [
      { header: 'Basic' },
      { value: -1, label: 'A thing' },
      { value: 0, label: 'A thing', note: 'with a note' },
      { value: 1, label: 'Another thing', secondary: 'with secondary text this time' },
      {
        value: -2,
        label: 'One more thing',
        note: 'with a note',
        secondary: 'and with secondary text',
      },
      { value: 6, icon: <ImageIcon />, label: 'An <img>', note: 'with a note' },
      { value: 2, label: 'A disabled thing', disabled: true },
      { separator: true },
      { header: 'Icons' },
      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
      {
        value: 4,
        label: 'USD',
        icon: <GlobeIcon />,
        note: 'United States dollar - Outside of the US',
      },
      { header: 'Currencies' },
      { value: 5, label: 'British pound', currency: 'gbp' },
      { value: 6, label: 'Euro', currency: 'eur' },
      { value: 7, label: 'USD', currency: 'usd', note: 'United States dollar' },
      { separator: true },
      { value: 8, label: 'Something else' },
      { header: 'Options with searchable alternatives' },
      {
        value: 9,
        label: 'A thing with searchable alternatives',
        searchStrings: ['abbreviation', 'acronym', 'nickname'],
      },
      { separator: true },
      { header: 'Long content options' },
      {
        value: 10,
        label:
          'One more thing with lorem ipsum dolor sit amet, consectetur adipiscing elit consequat text',
        note: 'with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor note text',
        secondary:
          'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
      },
      {
        value: 11,
        icon: <GlobeIcon />,
        label:
          'One more thing with lorem ipsum dolor sit amet, consectetur adipiscing elit consequat text',
        note: 'with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor note text',
        secondary:
          'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
      },
    ],
    selected: { value: 0, label: 'A thing', note: 'with a note' },
  },
  render: (args) => {
    const initialSelected = args.selected ?? { value: 0, label: 'A thing', note: 'with a note' };
    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
    return (
      <Select
        {...args}
        selected={selected}
        onChange={(option) => {
          if (isSelectOptionItem(option)) {
            setSelected(option);
          }
        }}
      />
    );
  },
};

export const CustomSearchFunction: Story = {
  args: {
    id: 'custom-search-button',
    size: 'md',
    placeholder: 'placeholder',
    dropdownRight: 'md',
    dropdownWidth: 'md',
    inverse: false,
    block: true,
    required: false,
    dropdownUp: false,
    disabled: false,
    search: true,
    searchPlaceholder: 'Search placeholder',
    options: [
      { header: 'Popular currencies' },
      {
        value: 1,
        label: 'EUR',
        currency: 'EUR',
        searchStrings: [
          'Austria',
          'Belgium',
          'Cyprus',
          'Estonia',
          'Finland',
          'France',
          'Germany',
          'Greece',
          'Ireland',
          'Italy',
          'Latvia',
          'Lithuania',
          'Luxembourg',
          'Malta',
          'Netherlands',
          'Portugal',
          'Slovakia',
          'Slovenia',
          'Spain',
          'Andorra',
          'Monaco',
          'San Marino',
          'Vatican City',
          'Kosovo',
          'Montenegro',
        ],
      },
      {
        value: 2,
        label: 'GBP',
        currency: 'GBP',
        searchStrings: ['Isle of Man', 'United Kingdom'],
      },
      {
        value: 3,
        label: 'INR',
        currency: 'INR',
        searchStrings: ['India'],
      },
      {
        value: 4,
        label: 'USD',
        currency: 'USD',
        searchStrings: [
          'United States',
          'Ecuador',
          'El Salvador',
          'Panama',
          'East Timor',
          'Zimbabwe',
          'Micronesia',
          'Marshall Islands',
          'Palau',
          'Turks and Caicos Islands',
          'British Virgin Islands',
          'Caribbean Netherlands',
          'Bermuda',
          'Bahamas',
          'Puerto Rico',
          'Guam',
          'Northern Mariana Islands',
          'American Samoa',
          'U.S. Virgin Islands',
        ],
      },
      { value: 5, label: 'DOP', currency: 'dop' },
      { value: 6, label: 'UZS', currency: 'uzs' },
      { value: 7, label: 'TTD', currency: 'ttd' },
      { header: 'All currencies' },
      {
        currency: 'aed',
        value: 'AED',
        label: 'AED',
        searchStrings: ['United Arab Emirates'],
      },
      {
        currency: 'aud',
        value: 'AUD',
        label: 'AUD',
        note: 'Australian dollar',
        searchStrings: ['Australia'],
        secondary: '',
        icon: null,
      },
      {
        currency: 'bgn',
        value: 'BGN',
        label: 'BGN',
        note: 'Bulgarian lev',
        searchStrings: ['Bulgaria'],
        secondary: '',
        icon: null,
      },
      {
        currency: 'brl',
        value: 'BRL',
        label: 'BRL',
        note: 'Brazilian real',
        searchStrings: ['Brazil'],
        secondary: '',
        icon: null,
      },
      {
        currency: undefined,
        value: 'USD',
        label: 'USD',
        note: 'United States dollar - Outside of the US',
        searchStrings: ['United States'],
        secondary: '',
        icon: <GlobeIcon />,
      },
    ],
    selected: { value: 1, label: 'EUR', currency: 'EUR' },
  },
  render: (args) => {
    const initialSelected = args.selected ?? { value: 1, label: 'EUR', currency: 'EUR' };
    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
    return (
      <Select
        {...args}
        selected={selected}
        onChange={(option) => {
          if (isSelectOptionItem(option)) {
            setSelected(option);
          }
        }}
      />
    );
  },
};

export const AdvancedSearch: Story = {
  args: {
    id: 'advanced-search-button',
    size: 'md',
    placeholder: 'placeholder',
    dropdownRight: 'md',
    dropdownWidth: 'md',
    inverse: false,
    block: true,
    required: false,
    dropdownUp: false,
    disabled: false,
    searchPlaceholder: 'searchplaceholder',
    options: [
      { header: 'Basic' },
      { value: -1, label: 'A thing' },
      { value: 0, label: 'A thing', note: 'with a note' },
      { value: 1, label: 'Another thing', secondary: 'with secondary text this time' },
      {
        value: -2,
        label: 'One more thing',
        note: 'with a note',
        secondary: 'and with secondary text',
      },
      { value: 2, label: 'A disabled thing', disabled: true },
      { separator: true },
      { header: 'Icons' },
      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
      { value: 4, label: 'Globe', icon: <GlobeIcon /> },
      { header: 'Currencies' },
      { value: 5, label: 'British pound', currency: 'gbp' },
      { value: 6, label: 'Euro', currency: 'eur' },
      { separator: true },
      { value: 7, label: 'Something else' },
      { header: 'Options with searchable alternatives' },
      {
        value: 8,
        label: 'A thing with searchable alternatives',
        searchStrings: ['abbreviation', 'acronym', 'nickname'],
      },
    ],
    selected: { value: 0, label: 'A thing', note: 'with a note' },
  },
  render: (args) => {
    const [searchValue, setSearchValue] = useState('');
    const initialSelected = args.selected ?? { value: 0, label: 'A thing', note: 'with a note' };
    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
    return (
      <Select
        {...args}
        selected={selected}
        searchValue={searchValue}
        options={
          Array.isArray(args.options)
            ? args.options.filter(
                (option) =>
                  typeof option.label === 'string' &&
                  option.label.toLowerCase().includes(searchValue),
              )
            : []
        }
        onChange={(option) => {
          if (isSelectOptionItem(option)) {
            setSelected(option);
          }
        }}
        onSearchChange={(v) => setSearchValue(v)}
      />
    );
  },
};

export const SearchingLargeLists: Story = {
  parameters: {
    docs: {
      canvas: {
        sourceState: 'hidden',
      },
    },
  },
  args: {
    id: 'large-list-button',
    size: 'md',
    placeholder: 'Placeholder text',
    dropdownRight: 'md',
    dropdownWidth: 'md',
    inverse: false,
    block: true,
    required: false,
    dropdownUp: false,
    disabled: false,
    search: true,
    searchPlaceholder: 'Search placeholder',
    options: new Array(1500).fill(null).map((x, index) => ({
      value: `option${index + 1}`,
      label: `Option ${index + 1}`,
      secondary: `Here we have a description describing option ${index + 1}`,
    })),
    selected: {
      value: 'option1',
      label: 'Option 1',
      secondary: 'Here we have a description describing option 1',
    },
  },
  render: (args) => {
    const initialSelected = args.selected ?? {
      value: 'option1',
      label: 'Option 1',
      secondary: 'Here we have a description describing option 1',
    };
    const [selected, setSelected] = useState<SelectOptionItem>(initialSelected);
    return (
      <Select
        {...args}
        selected={selected}
        onChange={(option) => {
          if (isSelectOptionItem(option)) {
            setSelected(option);
          }
        }}
      />
    );
  },
};

export const CustomDropdownBalances: Story = {
  render: () => (
    <>
      Bye
      <div className="open">
        <ul className="dropdown-menu dropdown-menu-md" role="menu">
          <li>
            <a className="dropdown-item" type="button">
              Statements
            </a>
          </li>
          <li>
            <a className="dropdown-item" type="button">
              Direct Debits
            </a>
          </li>
          <li>
            <a className="dropdown-item" type="button">
              Auto conversions
            </a>
          </li>
          <li>
            <a className="dropdown-item" type="button">
              Get proof of account details
            </a>
          </li>
        </ul>
      </div>
    </>
  ),
};