import React, { useState } from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Button, BUTTON_TYPE, BUTTON_SIZE } from 'components';
import { bem } from 'utils/bem';

import { SearchField } from './SearchField';
import { THEME } from '../../constants';

import styles from './search-field.stories.scss';

const searchFieldStoryClassName = bem(styles, 'search-field-story');

export default {
  title: 'ReactComponentLibrary/SearchField',
  component: SearchField,
  decorators: [
    (Story): JSX.Element => (
      <div className="centered-layout">
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof SearchField>;

const Template: ComponentStory<typeof SearchField> = (args) => {
  const [value, setValue] = useState(args.value);
  const [inputValue, setInputValue] = useState('');

  const clearValue = (): void => {
    setInputValue('');
  };

  const endAdornment = args.endAdornment && (
    <Button
      type={BUTTON_TYPE.tertiary}
      theme={THEME.light}
      size={BUTTON_SIZE.smallRound}
      icon="cross"
      onClick={clearValue}
    />
  );

  return (
    <SearchField
      {...args}
      value={value}
      inputValue={inputValue}
      endAdornment={endAdornment}
      onInputChange={setInputValue}
      onChange={setValue}
      className={searchFieldStoryClassName(null)}
    />
  );
};

const FIRST = 0;

const defaultOptions = [
  {
    id: 1,
    title: 'Michael Johnson 1',
    description: 'michael.johnson@soymusic.com',
  },
  {
    id: 2,
    title: 'Michaela Jonse 1 Michaela Jonse 1 Michaela Jonse 1 Michaela Jonse 1 Michaela Jonse 1',
    description:
      'michaela.jonse@soymusic.com michaela.jonse@soymusic.com michaela.jonse@soymusic.com michaela.jonse@soymusic.com',
  },
  {
    id: 3,
    title: 'Anthony Miller 1',
    description: 'anthony.miller@soymusic.com',
  },
  {
    id: 4,
    title: 'Michael Johnson 2',
    description: 'michael.johnson@soymusic.com',
  },
  {
    id: 5,
    title: 'Michaela Jonse 2',
    description: 'michaela.jonse@soymusic.com',
  },
  {
    id: 6,
    title: 'Small',
    description: 'anthony.miller@soymusic.com',
  },
  {
    id: 7,
    title: 'Anthony Miller 3',
    description: 'anthony.miller@soymusic.com',
  },
];

export const LightDefaultSearchFieldNothingSelected = Template.bind({});
LightDefaultSearchFieldNothingSelected.args = {
  value: null,
  placeholder: 'Search by Name or Email',
  options: defaultOptions,
};

export const LightDefaultSearchField = Template.bind({});
LightDefaultSearchField.args = {
  value: defaultOptions[FIRST],
  placeholder: 'Search by Name or Email',
  options: defaultOptions,
};

export const LightDefaultSearchFieldWithIcon = Template.bind({});
LightDefaultSearchFieldWithIcon.args = {
  icon: 'search',
  value: defaultOptions[FIRST],
  placeholder: 'Search by Name or Email',
  options: defaultOptions,
};

export const LightMultipleSearchField = Template.bind({});
LightMultipleSearchField.args = {
  value: [defaultOptions[FIRST]],
  multiple: true,
  placeholder: 'Text',
  options: defaultOptions,
};

export const LightMultipleSearchFieldWithIcon = Template.bind({});
LightMultipleSearchFieldWithIcon.args = {
  icon: 'search',
  value: [defaultOptions[FIRST]],
  multiple: true,
  placeholder: 'Text',
  options: defaultOptions,
};

export const LightMultipleSearchWithCustomPopper = Template.bind({});
LightMultipleSearchWithCustomPopper.args = {
  icon: 'search',
  value: [defaultOptions[FIRST]],
  listboxClassName: searchFieldStoryClassName('list-box'),
  noOptionsClassName: searchFieldStoryClassName('no-results'),
  multiple: true,
  placeholder: 'Text',
  options: defaultOptions,
};

export const LightDisabledDefaultSearch = Template.bind({});
LightDisabledDefaultSearch.args = {
  icon: 'search',
  disabled: true,
  value: defaultOptions[FIRST],
  options: defaultOptions,
};

export const LightDisabledMultipleSearch = Template.bind({});
LightDisabledMultipleSearch.args = {
  icon: 'search',
  value: [defaultOptions[FIRST]],
  disabled: true,
  multiple: true,
  options: defaultOptions,
};

export const LightDefaultSearchWithError = Template.bind({});
LightDefaultSearchWithError.args = {
  icon: 'search',
  error: 'Error message',
  value: defaultOptions[FIRST],
  placeholder: 'Search by Name or Email',
  options: defaultOptions,
};

export const LightMultipleSearchWithError = Template.bind({});
LightMultipleSearchWithError.args = {
  icon: 'search',
  value: [defaultOptions[FIRST]],
  error: 'Error message',
  multiple: true,
  placeholder: 'Text',
  options: defaultOptions,
};

export const LightDefaultSearchWithClearIcon = Template.bind({});
LightDefaultSearchWithClearIcon.args = {
  icon: 'search',
  value: defaultOptions[FIRST],
  placeholder: 'Search by Name or Email',
  options: defaultOptions,
  endAdornment: true,
};

export const LightMultiselectSearchWithLimit = Template.bind({});
LightMultiselectSearchWithLimit.args = {
  icon: 'search',
  value: [defaultOptions[FIRST]],
  hint: 'You can select up to 5 names',
  maxItems: 5,
  multiple: true,
  placeholder: 'Text',
  options: defaultOptions,
};