GroupedList

() => {
  return (
    <div style={{ width: 290 }}>
      <GroupedList
        options={[
          {
            id: 0,
            groupName: 'Fruit',
            items: [
              {
                id: 0,
                header: 'Coconut',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 2,
                header: 'Apple',
                description:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 3,
                header: 'Сherry',
                disabled: true,
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 4,
                header: 'Orange',
                description: 'Big orange',
                someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
                selected: true,
              },
              {
                id: 5,
                header: 'Banana',
                description: 'Big banana',
                disabled: true,
                someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
              },
            ],
          },
          {
            id: 2,
            groupName: 'Companies',
            items: [
              {
                id: 0,
                header: 'Ford',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header: 'Ferrari',
                description:
                  'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
            ],
          },
        ]}
        onClickItem={(...args) => console.log('onClickItem', args)}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <GroupedList
        options={[
          {
            id: 0,
            groupName: 'Fruit',
            items: [
              {
                id: 0,
                header: 'Coconut',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                icon: <GroupedList.Icon name="heart-icon" fill="#ff013a" />,
              },
              {
                id: 1,
                header:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 2,
                header: 'Apple',
                description:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                icon: 'heart-icon',
              },
              {
                id: 3,
                header: 'Сherry',
                icon: 'heart-icon',
                disabled: true,
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 4,
                header: 'Orange',
                description: 'Big orange',
                icon: 'heart-icon',
                someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
                selected: true,
              },
              {
                id: 5,
                header: 'Banana',
                description: 'Big banana',
                disabled: true,
                icon: 'heart-icon',
                someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
              },
            ],
          },
          {
            id: 2,
            groupName: 'Companies',
            items: [
              {
                id: 0,
                header: 'Ford',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                icon: <GroupedList.Icon name="heart-icon" fill="#ff013a" />,
              },
              {
                id: 1,
                header: 'Ferrari',
                description:
                  'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
            ],
          },
        ]}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <GroupedList
        options={[
          {
            id: 0,
            groupName: 'Fruit',
            items: [
              {
                id: 0,
                header: 'Coconut',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 2,
                header: 'Apple',
                description:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 3,
                header: 'Сherry',
                disabled: true,
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 4,
                header: 'Orange',
                description: 'Big orange',
                someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
                selected: true,
              },
              {
                id: 5,
                header: 'Banana',
                description: 'Big banana',
                disabled: true,
                someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
              },
            ],
          },
          {
            id: 1,
            groupName: 'Companies',
            items: [
              {
                id: 0,
                header: 'Ford',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header: 'Ferrari',
                description:
                  'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
            ],
          },
        ]}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected =>
          console.log('onSelectedItemsChanged', selected)
        }
        defaultSelected={[
          {
            group: {
              id: 1,
              groupName: 'Companies',
              items: [
                {
                  id: 0,
                  header: 'Ford',
                  someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                },
                {
                  id: 1,
                  header: 'Ferrari',
                  description:
                    'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                  someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                },
              ],
            },
            item: {
              id: 1,
              header: 'Ferrari',
              description:
                'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
              someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            },
          },
        ]}
      />
    </div>
  )
}

() => {
  const [selectedOptions, setSelected] = React.useState([])
  return (
    <div style={{ width: 290 }}>
      <button type="button" onClick={() => setSelected([])}>
        reset selected
      </button>
      <GroupedList
        options={[
          {
            id: 0,
            groupName: 'Fruit',
            items: [
              {
                id: 0,
                header: 'Coconut',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 2,
                header: 'Apple',
                description:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 3,
                header: 'Сherry',
                disabled: true,
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 4,
                header: 'Orange',
                description: 'Big orange',
                someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
                selected: true,
              },
              {
                id: 5,
                header: 'Banana',
                description: 'Big banana',
                disabled: true,
                someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
              },
            ],
          },
          {
            id: 1,
            groupName: 'Companies',
            items: [
              {
                id: 0,
                header: 'Ford',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header: 'Ferrari',
                description:
                  'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
            ],
          },
        ]}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected => {
          console.log('onSelectedItemsChanged', selected)
          setSelected(selected)
        }}
        selectedOptions={selectedOptions}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <SearchableGroupedList
        options={[
          {
            id: 0,
            groupName: 'Fruit',
            items: [
              {
                id: 0,
                header: 'Coconut',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 2,
                header: 'Apple',
                description:
                  'An apple is an edible fruit produced by an apple tree (Malus domestica)',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 3,
                header: 'Сherry',
                disabled: true,
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 4,
                header: 'Orange',
                description: 'Big orange',
                someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
                selected: true,
              },
              {
                id: 5,
                header: 'Banana',
                description: 'Big banana',
                disabled: true,
                someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
              },
            ],
          },
          {
            id: 1,
            groupName: 'Companies',
            items: [
              {
                id: 0,
                header: 'Ford',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
              {
                id: 1,
                header: 'Ferrari',
                description:
                  'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
              },
            ],
          },
        ]}
        onFoundItems={foundItems => console.log('onFoundItems', foundItems)}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected =>
          console.log('onSelectedItemsChanged', selected)
        }
        onChangeSearchValue={searchValue =>
          console.log('onChangeSearchValue', searchValue)
        }
        defaultSelected={[
          {
            group: {
              id: 1,
              groupName: 'Companies',
              items: [
                {
                  id: 0,
                  header: 'Ford',
                  someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                },
                {
                  id: 1,
                  header: 'Ferrari',
                  description:
                    'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
                  someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
                },
              ],
            },
            item: {
              id: 1,
              header: 'Ferrari',
              description:
                'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
              someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            },
          },
        ]}
      />
    </div>
  )
}

() => {
  const [searchValue, changeSearchValue] = React.useState('Ferrari')
  const customFilterOptions = (options, currentsSearchValue) => {
    const isGroupItemMatch = item => {
      const description = lowerCase(get(item, 'description', ''))
      const searchFragment = lowerCase(currentsSearchValue.trim())
      return description.includes(searchFragment)
    }
    return options.reduce((acc, item) => {
      const filteredItems = item.items.filter(isGroupItemMatch)
      if (isEmpty(filteredItems)) {
        return acc
      }
      return [...acc, { ...item, items: filteredItems }]
    }, [])
  }
  const debouncedGetSearchValue = useDebounce(searchValue, 2000)
  const options = React.useMemo(() => {
    return [
      {
        id: 0,
        groupName: 'Fruit',
        items: [
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Сherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
            selected: true,
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ],
      },
      {
        id: 1,
        groupName: 'Companies',
        items: [
          {
            id: 0,
            header: 'Ford',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header: 'Ferrari',
            description:
              'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
        ],
      },
    ]
  }, [])
  const defaultSelected = React.useMemo(() => {
    return [
      {
        group: {
          id: 1,
          groupName: 'Companies',
          items: [
            {
              id: 0,
              header: 'Ford',
              someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            },
            {
              id: 1,
              header: 'Ferrari',
              description:
                'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
              someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            },
          ],
        },
        item: {
          id: 1,
          header: 'Ferrari',
          description:
            'Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy.',
          someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
        },
      },
    ]
  }, [])
  const onFoundItems = React.useCallback(foundItems => {
    console.log('onFoundItems', foundItems)
  }, [])
  const onSelectItem = React.useCallback((...args) => {
    console.log('onSelectItem', args)
  }, [])
  const onSelectedItemsChanged = React.useCallback(selected => {
    console.log('onSelectedItemsChanged', selected)
  }, [])
  const onChangeSearchValue = React.useCallback(
    value => changeSearchValue(value),
    [changeSearchValue],
  )
  return (
    <div style={{ width: 290 }}>
      <SearchableGroupedList
        options={options}
        selectionMode
        defaultSelected={defaultSelected}
        searchValue={debouncedGetSearchValue}
        filterOptions={customFilterOptions}
        onFoundItems={onFoundItems}
        onSelectItem={onSelectItem}
        onSelectedItemsChanged={onSelectedItemsChanged}
        onChangeSearchValue={onChangeSearchValue}
        input={
          <SearchableGroupedList.Input
            icon="play-icon"
            placeholder="Введите значение"
          />
        }
        notFound={
          <SearchableGroupedList.NotFound>
            Не найдено!
          </SearchableGroupedList.NotFound>
        }
      />
    </div>
  )
}