import { act, renderHook } from '@testing-library/react-hooks'
import {
  draggableOptionIdSymbol,
  isOptgroupSymbol,
} from './SuperSelect.constants'
import { useSuperSelect } from './useSuperSelect'

describe('setSearchValue', () => {
  jest.useFakeTimers()

  test('should set new searchValue', () => {
    const { result } = renderHook(() => useSuperSelect({}))

    act(() => {
      result.current.state.setSearchValue('ababa')
      result.current.state.setSearchValue('ababa2')
      result.current.state.setSearchValue('ababa1')
      jest.runAllTimers()
    })

    expect(result.current.state.searchValue).toEqual('ababa1')

    act(() => {
      result.current.state.setSearchValue('The value')
      jest.runAllTimers()
    })

    expect(result.current.state.searchValue).toEqual('The value')
  })
})

describe('getClearProps', () => {
  test('should return value [] and set open true', () => {
    const { result } = renderHook(() =>
      useSuperSelect({ multiple: true, initialValue: ['123', '321'] })
    )

    const stopPropagationMock = jest.fn()

    act(() => {
      result.current.props.clear().onClick({
        stopPropagation: stopPropagationMock,
      })
    })

    expect(result.current.state.value).toEqual([])
    expect(result.current.state.open).toEqual(true)
  })
})

describe('getOptionGroup', () => {
  test('should return group name default', () => {
    const { result } = renderHook(() => useSuperSelect({}))
    expect(
      result.current.option.group({
        id: 2,
        label: 'item 2',
        group: 'Group 1',
      })
    ).toEqual('Group 1')

    expect(
      result.current.option.group({
        id: 2,
        label: 'item 2',
      })
    ).toEqual('')
  })

  test('should return option group custom', () => {
    const { result } = renderHook(() =>
      useSuperSelect({
        getOptionGroup: (option) => option?.customGroup ?? '',
      })
    )

    expect(
      result.current.option.group({
        id: 2,
        label: 'item 2',
        customGroup: 'Group custom',
      })
    ).toEqual('Group custom')

    expect(
      result.current.option.group({
        id: 2,
        label: 'item 2',
      })
    ).toEqual('')
  })
})

describe('getOptionIsBatch', () => {
  test('should return true if is batch', () => {
    const { result } = renderHook(() => useSuperSelect({}))
    expect(
      result.current.option.isBatch({
        id: '1',
        group: 'Groups 1',
        value: [2, 4, 6],
        label: 'Group B',
        disabled: false,
      })
    ).toEqual(true)

    expect(
      result.current.option.isBatch({
        id: '1',
        group: 'Groups 1',
        option: 'test 1',
        label: 'Group B',
        disabled: false,
      })
    ).toEqual(false)
  })

  test('should return true if is custom batch', () => {
    const { result } = renderHook(() =>
      useSuperSelect({
        getOptionIsBatch: (option) => {
          return Array.isArray(option?.customValue)
        },
      })
    )

    expect(
      result.current.option.isBatch({
        id: '1',
        group: 'Groups 1',
        customValue: [2, 4, 6],
        label: 'Group B',
        disabled: false,
      })
    ).toEqual(true)

    expect(
      result.current.option.isBatch({
        id: '1',
        group: 'Groups 1',
        label: 'Group B',
        disabled: false,
      })
    ).toEqual(false)
  })
})

describe('getOptionIsDisabled', () => {
  test('should return true if option is disabled', () => {
    const { result } = renderHook(() => useSuperSelect({}))

    expect(
      result.current.option.isDisabled({
        id: 2,
        label: 'item 2',
        group: 'Group 1',
        disabled: true,
      })
    ).toEqual(true)

    expect(
      result.current.option.isDisabled({
        id: 2,
        label: 'item 2',
        group: 'Group 1',
      })
    ).toEqual(false)
  })

  test('should return true if option is disabled custom', () => {
    const { result } = renderHook(() =>
      useSuperSelect({
        getOptionIsDisabled: (option) => {
          return option?.customDisabled ?? false
        },
      })
    )

    expect(
      result.current.option.isDisabled({
        id: 2,
        label: 'item 2',
        group: 'Group 1',
        customDisabled: true,
      })
    ).toEqual(true)

    expect(
      result.current.option.isDisabled({
        id: 2,
        label: 'item 2',
        group: 'Group 1',
      })
    ).toEqual(false)
  })
})

describe('getOptionLabel', () => {
  test('should return label', () => {
    const { result } = renderHook(() => useSuperSelect({}))

    expect(
      result.current.option.label({
        id: 2,
        label: 'item 2',
        group: 'Group 1',
      })
    ).toEqual('item 2')

    expect(
      result.current.option.label({
        id: 2,
        group: 'Group 1',
      })
    ).toEqual('')
  })

  test('should return custom label', () => {
    const { result } = renderHook(() =>
      useSuperSelect({
        getOptionLabel: (option) => {
          return option?.customLabel ?? ''
        },
      })
    )

    expect(
      result.current.option.label({
        id: 2,
        customLabel: 'item 2',
        group: 'Group 1',
      })
    ).toEqual('item 2')

    expect(
      result.current.option.label({
        id: 2,
        group: 'Group 1',
      })
    ).toEqual('')
  })
})

describe('onSelect', () => {
  describe('multiple', () => {
    test('should handle batch option value', () => {
      const { result } = renderHook(() =>
        useSuperSelect({ multiple: true, defaultValue: ['123', '321'] })
      )

      act(() => {
        result.current.state.onSelect({
          value: ['456', '123'],
        })
      })

      expect(result.current.state.value).toEqual(['123', '321', '456'])
    })

    test('should not select disabled option', () => {
      const { result } = renderHook(() =>
        useSuperSelect({ multiple: true, defaultValue: ['123', '321'] })
      )

      act(() => {
        result.current.state.onSelect({
          value: ['456', '123'],
          disabled: true,
        })
      })

      expect(result.current.state.value).toEqual(['123', '321'])
    })

    test('should handle regular option', () => {
      const { result } = renderHook(() =>
        useSuperSelect({ multiple: true, defaultValue: ['123', '321'] })
      )

      act(() => {
        result.current.state.onSelect({
          value: '456',
        })
      })

      expect(result.current.state.value).toEqual(['123', '321', '456'])
    })
  })

  describe('single', () => {
    test('should not select disabled option', () => {
      const { result } = renderHook(() =>
        useSuperSelect({ multiple: false, defaultValue: '123' })
      )

      act(() => {
        result.current.state.onSelect({
          value: '456',
          disabled: true,
        })
      })

      expect(result.current.state.value).toEqual('123')
    })

    test('should set new value', () => {
      const { result } = renderHook(() =>
        useSuperSelect({ multiple: false, defaultValue: '123' })
      )

      act(() => {
        result.current.state.onSelect({
          value: '456',
        })
      })

      expect(result.current.state.value).toEqual('456')
    })
  })
})

describe('controlled API', () => {
  test('should always return value when passed value', () => {
    const { result } = renderHook(() => useSuperSelect({ value: '123' }))

    expect(result.current.state.value).toEqual('123')
  })

  test('should call onChange when value is changed', () => {
    const onChangeMock = jest.fn()
    const { result, rerender } = renderHook(useSuperSelect, {
      initialProps: {
        value: '123',
        onChange: onChangeMock,
      },
    })

    act(() => {
      result.current.state.onSelect({
        value: '456',
      })
    })

    rerender({ value: '456' })

    expect(onChangeMock).toHaveBeenCalledWith('456')
    expect(result.current.state.value).toEqual('456')
  })
})

describe('uncontrolled API', () => {
  test('should call onChange when the value is changed', () => {
    const onChangeMock = jest.fn()

    const { result } = renderHook(() =>
      useSuperSelect({
        defaultValue: '123',
        onChange: (v) => {
          onChangeMock(v)
        },
      })
    )

    expect(onChangeMock).not.toHaveBeenCalled()
    expect(result.current.state.value).toEqual('123')

    act(() => {
      result.current.state.onSelect({
        value: '321',
      })
    })

    expect(onChangeMock).toHaveBeenCalledWith('321')
    expect(result.current.state.value).toEqual('321')
  })
})

describe('options', () => {
  describe('draggable = false', () => {
    describe('sorted', () => {
      test('should return unfiltered array', () => {
        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],
            multiple: true,
            value: [2, 3, 5],
          },
        })

        expect(result.current.state.options).toEqual([
          {
            value: [9, 8, 10],
            label: 'Batch Ungrouped',
            disabled: false,
          },
          {
            label: 'value 1',
            value: 1,
          },
          {
            id: 'Batch Group',
            label: 'Batch Group',
            [isOptgroupSymbol]: true,
          },
          {
            value: [2, 3, 5],
            label: 'Batch Group',
            group: 'Batch Group',
            disabled: true,
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'Batch Group 1.1',
            value: [4, 6],
            group: 'Group 1',
            disabled: false,
          },
          {
            label: 'Batch Group 1.2',
            value: [1, 7],
            group: 'Group 1',
            disabled: false,
          },
          { label: 'value 0', value: 0, group: 'Group 1' },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'Batch Group 2',
            value: [11, 12, 13],
            group: 'Group 2',
            disabled: false,
          },
          { label: 'value 2', value: 2, group: 'Group 2' },
          { label: 'value 3', value: 3, group: 'Group 2' },
        ])
      })

      test('should return filtered array', () => {
        jest.useFakeTimers()

        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],
            multiple: true,
            value: [2, 3, 5],
          },
        })

        act(() => {
          result.current.state.setSearchValue('value')
          jest.runAllTimers()
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            group: 'Group 1',
            label: 'value 0',
            value: 0,
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          { label: 'value 2', value: 2, group: 'Group 2' },
          { label: 'value 3', value: 3, group: 'Group 2' },
        ])
      })
    })

    describe('unsorted', () => {
      test('should return unfiltered array', () => {
        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],
            multiple: true,
            value: [2, 3, 5],
            sort: false,
          },
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
          },
          {
            value: [9, 8, 10],
            label: 'Batch Ungrouped',
            disabled: false,
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          { label: 'value 0', value: 0, group: 'Group 1' },
          {
            label: 'Batch Group 1.1',
            value: [4, 6],
            group: 'Group 1',
            disabled: false,
          },
          {
            label: 'Batch Group 1.2',
            value: [1, 7],
            group: 'Group 1',
            disabled: false,
          },
          {
            id: 'Batch Group',
            label: 'Batch Group',
            [isOptgroupSymbol]: true,
          },
          {
            value: [2, 3, 5],
            label: 'Batch Group',
            group: 'Batch Group',
            disabled: true,
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          { label: 'value 2', value: 2, group: 'Group 2' },
          { label: 'value 3', value: 3, group: 'Group 2' },
          {
            label: 'Batch Group 2',
            value: [11, 12, 13],
            group: 'Group 2',
            disabled: false,
          },
        ])
      })

      test('should return filtered array', () => {
        jest.useFakeTimers()

        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],
            multiple: true,
            value: [2, 3, 5],
            sort: false,
          },
        })

        act(() => {
          result.current.state.setSearchValue('value')
          jest.runAllTimers()
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          { label: 'value 0', value: 0, group: 'Group 1' },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          { label: 'value 2', value: 2, group: 'Group 2' },
          { label: 'value 3', value: 3, group: 'Group 2' },
        ])
      })
    })
  })

  describe('draggable = true', () => {
    describe('sorted', () => {
      test('should return filtered array', () => {
        jest.useFakeTimers()

        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            draggable: true,
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],

            multiple: true,
            value: [2, 3, 5],
          },
        })

        act(() => {
          result.current.state.setSearchValue('value')
          jest.runAllTimers()
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            group: 'Group 1',
            label: 'value 0',
            value: 0,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'value 2',
            value: 2,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 3',
            value: 3,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
        ])
      })

      test('should return unfiltered array', () => {
        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            draggable: true,
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],

            multiple: true,
            value: [2, 3, 5],
          },
        })

        expect(result.current.state.options).toEqual([
          {
            value: [9, 8, 10],
            label: 'Batch Ungrouped',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 1',
            value: 1,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Batch Group',
            label: 'Batch Group',
            [isOptgroupSymbol]: true,
          },
          {
            value: [2, 3, 5],
            label: 'Batch Group',
            group: 'Batch Group',
            disabled: true,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'Batch Group 1.1',
            value: [4, 6],
            group: 'Group 1',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'Batch Group 1.2',
            value: [1, 7],
            group: 'Group 1',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 0',
            value: 0,
            group: 'Group 1',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'Batch Group 2',
            value: [11, 12, 13],
            group: 'Group 2',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 2',
            value: 2,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 3',
            value: 3,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
        ])
      })

      test('should return filtered array', () => {
        jest.useFakeTimers()

        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            draggable: true,
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],

            multiple: true,
            value: [2, 3, 5],
          },
        })

        act(() => {
          result.current.state.setSearchValue('value')
          jest.runAllTimers()
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            group: 'Group 1',
            label: 'value 0',
            value: 0,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'value 2',
            value: 2,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 3',
            value: 3,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
        ])
      })
    })

    describe('unsorted', () => {
      test('should return filtered array', () => {
        jest.useFakeTimers()

        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            draggable: true,
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],

            multiple: true,
            value: [2, 3, 5],
            sort: false,
          },
        })

        act(() => {
          result.current.state.setSearchValue('value')
          jest.runAllTimers()
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'value 0',
            value: 0,
            group: 'Group 1',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'value 2',
            value: 2,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 3',
            value: 3,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
        ])
      })

      test('should return unfiltered array', () => {
        const { result } = renderHook(useSuperSelect, {
          initialProps: {
            draggable: true,
            options: [
              { label: 'value 0', value: 0, group: 'Group 1' },
              {
                label: 'value 1',
                value: 1,
              },
              {
                label: 'Batch Group 1.1',
                value: [4, 6],
                group: 'Group 1',
                disabled: false,
              },
              {
                label: 'Batch Group 1.2',
                value: [1, 7],
                group: 'Group 1',
                disabled: false,
              },
              {
                value: [2, 3, 5],
                label: 'Batch Group',
                group: 'Batch Group',
                disabled: false,
              },
              {
                value: [9, 8, 10],
                label: 'Batch Ungrouped',
                disabled: false,
              },
              { label: 'value 2', value: 2, group: 'Group 2' },
              { label: 'value 3', value: 3, group: 'Group 2' },
              {
                label: 'Batch Group 2',
                value: [11, 12, 13],
                group: 'Group 2',
                disabled: false,
              },
            ],

            multiple: true,
            value: [2, 3, 5],
            sort: false,
          },
        })

        expect(result.current.state.options).toEqual([
          {
            label: 'value 1',
            value: 1,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            value: [9, 8, 10],
            label: 'Batch Ungrouped',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 1',
            label: 'Group 1',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'value 0',
            value: 0,
            group: 'Group 1',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'Batch Group 1.1',
            value: [4, 6],
            group: 'Group 1',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'Batch Group 1.2',
            value: [1, 7],
            group: 'Group 1',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Batch Group',
            label: 'Batch Group',
            [isOptgroupSymbol]: true,
          },
          {
            value: [2, 3, 5],
            label: 'Batch Group',
            group: 'Batch Group',
            disabled: true,
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            id: 'Group 2',
            label: 'Group 2',
            [isOptgroupSymbol]: true,
          },
          {
            label: 'value 2',
            value: 2,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'value 3',
            value: 3,
            group: 'Group 2',
            [draggableOptionIdSymbol]: expect.any(String),
          },
          {
            label: 'Batch Group 2',
            value: [11, 12, 13],
            group: 'Group 2',
            disabled: false,
            [draggableOptionIdSymbol]: expect.any(String),
          },
        ])
      })
    })
  })
})
