/* eslint-disable react/no-danger */
/* eslint-disable react/no-multi-comp */
import React, { useState } from 'react'
import { components } from 'react-select'
import {
Avatar,
Body,
Flex,
FlexItem,
Title,
Typeahead,
} from 'playbook-ui'
const USERS = [
{
name: "Wade Winningham",
title: "Nitro Principal Developer",
territory: "PHL",
},
{
name: "Jason Cypret",
title: "Vice President of User Experience",
territory: "PHL",
},
{
name: "Stephen Marshall",
title: "Senior User Experience Engineer",
territory: "PHL",
},
{
name: "Jasper Furniss",
title: "Senior User Experience Engineer",
territory: "PHL",
},
];
const TypeaheadWithHighlight = (props) => {
const [selectedUser, setSelectedUser] = useState()
const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
const highlighted = (text) => {
if (!inputValue.length) return text
return text.replace(
new RegExp(inputValue, 'gi'),
(highlighted) => `${highlighted}`
)
}
return (
<span dangerouslySetInnerHTML={{ __html: highlighted(name) }} />
{" • "}
{territory}
)
}
const customComponents = {
Option: (highlightProps) => (
),
SingleValue: ({ ...props }) => (
{props.data.name}
)
}
return (
option.name}
getOptionValue={({name, title}) => `${name} ${title}`}
label="Users"
onChange={(user) => setSelectedUser(user)}
options={USERS.filter((option) => option.name != selectedUser?.name)}
placeholder="type the name of a user"
{...props}
/>
)
}
export default TypeaheadWithHighlight