import React, { useState } from 'react';

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

import { Select } from './Select';
import { SimpleTrigger } from './components';
import { SELECT_TYPE } from './types';

import styles from './select.stories.scss';

export default {
  title: 'ReactComponentLibrary/Select',
  component: Select,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof Select>;

const options = [
  {
    id: 0,
    label: 'Option',
  },
  {
    id: 1,
    label: 'Option 1',
  },
  {
    id: 2,
    label: 'Enormous, huge, extra very long option',
  },
  {
    id: 3,
    label: 'Option 3',
  },
  {
    id: 4,
    label: 'Option 4',
    isDisabled: true,
  },
  {
    id: 5,
    label: 'Option 5',
  },
  {
    id: 6,
    label: 'Option 6',
  },
  {
    id: 7,
    label: 'Option 7',
  },
  {
    id: 8,
    label: 'Option 8',
  },
  {
    id: 9,
    label: 'Option 9',
  },
];

const Template: ComponentStory<typeof Select> = (args) => {
  const [value, setValue] = useState<number | string | null>(args.value);

  const onChange = (newValue: number | string | null): void => {
    setValue(newValue);
  };

  return (
    <Select
      {...args}
      value={value}
      onChange={onChange}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  value: 1,
  options,
};

export const DefaultEmpty = Template.bind({});
DefaultEmpty.args = {
  value: null,
  options,
};

export const DefaultEmptyWithPlaceholder = Template.bind({});
DefaultEmptyWithPlaceholder.args = {
  value: null,
  options,
  placeholder: 'Select an option',
};

export const DefaultWithLabel = Template.bind({});
DefaultWithLabel.args = {
  value: 1,
  label: 'Single select',
  options,
};

export const DefaultWithError = Template.bind({});
DefaultWithError.args = {
  value: 1,
  error: 'Select error',
  options,
};

export const DefaultWithSearch = Template.bind({});
DefaultWithSearch.args = {
  value: 1,
  options,
  isSearchable: true,
};

export const DefaultDisabled = Template.bind({});
DefaultDisabled.args = {
  value: 1,
  isDisabled: true,
  options,
};

export const DefaultCompact = Template.bind({});
DefaultCompact.args = {
  variant: SELECT_TYPE.compact,
  value: 1,
  options,
};

export const DefaultCompactWithSearch = Template.bind({});
DefaultCompactWithSearch.args = {
  variant: SELECT_TYPE.compact,
  value: 1,
  options,
  isSearchable: true,
};

export const DefaultCompactWithLabel = Template.bind({});
DefaultCompactWithLabel.args = {
  variant: SELECT_TYPE.compact,
  value: 1,
  label: 'Single select',
  options,
};

export const DefaultCompactWithCustomWidth = Template.bind({});
DefaultCompactWithCustomWidth.args = {
  variant: SELECT_TYPE.compact,
  value: 1,
  options,
  rootClassName: styles['custom-root'],
  popperClassName: styles['custom-popper'],
};

export const Simple = Template.bind({});
Simple.args = {
  value: 1,
  options,
  components: {
    Trigger: SimpleTrigger,
  },
};

export const SimpleCompact = Template.bind({});
SimpleCompact.args = {
  variant: SELECT_TYPE.compact,
  value: 1,
  options,
  components: {
    Trigger: SimpleTrigger,
  },
};