import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useState } from 'react' import classNames from 'classnames' import ChevronDownIcon from 'mdi-react/ChevronDownIcon' import ChevronUpIcon from 'mdi-react/ChevronUpIcon' import { TeamAvatar } from '@sourcegraph/shared/src/components/TeamAvatar' import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxOptionText, createRectangle, Flipping, Popover, PopoverContent, type PopoverOpenEvent, PopoverTrigger, Strategy, usePopoverContext, } from '@sourcegraph/wildcard' import type { ParentTeamSelectSearchFields, Scalars } from '../../../graphql-operations' import { useParentTeamSelectSearch } from './backend' import styles from './ParentTeamSelect.module.scss' const POPOVER_PADDING = createRectangle(0, 0, 5, 5) export interface ParentTeamSelectProps { disabled: boolean id?: Scalars['ID'] teamId?: string initial?: string onSelect: (id: string | null) => void } export const ParentTeamSelect: React.FunctionComponent = ({ id, teamId, onSelect, initial, disabled, }) => { const [isOpen, setOpen] = useState(false) const [parentTeam, setParentTeam] = useState() const handleOpenChange = (event: PopoverOpenEvent): void => { setOpen(event.isOpen) } const handleSelect = (parentTeam: ParentTeamSelectSearchFields | undefined): void => { setParentTeam(parentTeam) setOpen(false) onSelect(parentTeam?.name || null) } return ( ) } export interface ParentTeamSelectContentProps { teamId?: Scalars['ID'] parentTeam: ParentTeamSelectSearchFields | undefined onSelect: (parentTeam: ParentTeamSelectSearchFields) => void } export const ParentTeamSelectContent: React.FunctionComponent = ({ teamId, onSelect, }) => { const [search, setSearch] = useState('') const { data, loading, error } = useParentTeamSelectSearch(teamId || null, search) const selectHandler = (name: string): void => { const team = data?.teams.nodes.find(team => team.name === name) if (team) { onSelect(team) } } useEffect(() => { if (error) { // eslint-disable-next-line no-console console.error(error) } }, [error]) const suggestions: ParentTeamSelectSearchFields[] = data?.teams.nodes || [] return ( setSearch(event.target.value)} status={loading ? 'loading' : error ? 'error' : 'initial'} /> {suggestions.map((item, index) => ( ))} ) } interface TeamOptionProps { item: ParentTeamSelectSearchFields index: number } const TeamOption: React.FunctionComponent = ({ item, index }) => ( {' '} ) interface ParentTeamSelectButtonProps extends ButtonHTMLAttributes { title: string | undefined } const ParentTeamSelectButton = forwardRef( function ParentTeamSelectButton(props, ref) { const { title, className, ...attributes } = props const { isOpen } = usePopoverContext() const Icon = isOpen ? ChevronUpIcon : ChevronDownIcon return ( ) } )