<commit_before>import React from 'react'
import PropTypes from 'prop-types'

import Downshift from 'downshift'

import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import Paper from '@material-ui/core/Paper'
import MenuItem from '@material-ui/core/MenuItem'

import UnitConverter, { UnitIdentifier } from '../../converters/UnitConverter'

const styles = theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    formControl: {
        margin: theme.spacing.unit,
        minWidth: 200,
    },
    textField: {
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit,
        width: 200,
    }
})

function unitConverterToString(unitConverter) {
    return unitConverter
        ? `${unitConverter.authority.detail.commonName} ${unitConverter.unit.detail.singular}` 
        : ''
}
  
function renderInput(inputProps) {
    const { InputProps, classes, usage, onSuggestionChanged, ref, ...other } = inputProps
  
    return (
        <TextField
            InputProps={{
                inputRef: ref,
                classes: {
                    root: classes.inputRoot,
                },
                ...InputProps,
            }}
            {...other}
        />
    )
}

renderInput.propTypes = {
    usage: PropTypes.string.isRequired,
    onSuggestionChanged: PropTypes.func.isRequired
}

function renderSuggestion({ suggestion, index, itemProps, highlightedIndex, selectedItem }) {
    const isHighlighted = highlightedIndex === index
    const isSelected = (selectedItem  === suggestion)
  
    return (
        <MenuItem
            {...itemProps}
            key={suggestion.toString()}
            selected={isHighlighted}
            component="div"
            style={{
                fontWeight: isSelected ? 500 : 400,
            }}
        >
            {unitConverterToString(suggestion)}
        </MenuItem>
    )
}
renderSuggestion.propTypes = {
    highlightedIndex: PropTypes.number,
    index: PropTypes.number,
    itemProps: PropTypes.object,
    selectedItem: PropTypes.string,
    suggestion: PropTypes.instanceOf(UnitIdentifier).isRequired,
}

const UnitCompleter = ({
    classes,
    text, usage,
    suggestions,
    onSuggestionChanged,
    onConverterChanged
}) => {

    return (
        <div className={classes.root}>
            <Downshift
                itemToString={unitConverterToString}
                onInputValueChange={inputValue => onSuggestionChanged(inputValue, "Cookery", 5)}
                onChange={onConverterChanged}
            >
                {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
                    <div className={classes.container}>
                        {renderInput({
                            usage: "Cookery",
                            onSuggestionChanged,
                            fullWidth: true,
                            classes,
                            InputProps: getInputProps({
                                placeholder: 'Search a country (start with a)',
                                id: 'integration-downshift-simple',
                            }),
                        })}
                        {isOpen ? (
                            <Paper className={classes.paper} square>
                                {suggestions.map((suggestion, index) =>
                                    renderSuggestion({
                                        suggestion,
                                        index,<commit_msg>Update the help text<commit_after>import React from 'react'
import PropTypes from 'prop-types'

import Downshift from 'downshift'

import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import Paper from '@material-ui/core/Paper'
import MenuItem from '@material-ui/core/MenuItem'

import UnitConverter, { UnitIdentifier } from '../../converters/UnitConverter'

const styles = theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    formControl: {
        margin: theme.spacing.unit,
        minWidth: 200,
    },
    textField: {
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit,
        width: 200,
    }
})

function unitConverterToString(unitConverter) {
    return unitConverter
        ? `${unitConverter.authority.detail.commonName} ${unitConverter.unit.detail.singular}` 
        : ''
}
  
function renderInput(inputProps) {
    const { InputProps, classes, usage, onSuggestionChanged, ref, ...other } = inputProps
  
    return (
        <TextField
            InputProps={{
                inputRef: ref,
                classes: {
                    root: classes.inputRoot,
                },
                ...InputProps,
            }}
            {...other}
        />
    )
}

renderInput.propTypes = {
    usage: PropTypes.string.isRequired,
    onSuggestionChanged: PropTypes.func.isRequired
}

function renderSuggestion({ suggestion, index, itemProps, highlightedIndex, selectedItem }) {
    const isHighlighted = highlightedIndex === index
    const isSelected = (selectedItem  === suggestion)
  
    return (
        <MenuItem
            {...itemProps}
            key={suggestion.toString()}
            selected={isHighlighted}
            component="div"
            style={{
                fontWeight: isSelected ? 500 : 400,
            }}
        >
            {unitConverterToString(suggestion)}
        </MenuItem>
    )
}
renderSuggestion.propTypes = {
    highlightedIndex: PropTypes.number,
    index: PropTypes.number,
    itemProps: PropTypes.object,
    selectedItem: PropTypes.string,
    suggestion: PropTypes.instanceOf(UnitIdentifier).isRequired,
}

const UnitCompleter = ({
    classes,
    text, usage,
    suggestions,
    onSuggestionChanged,
    onConverterChanged
}) => {

    return (
        <div className={classes.root}>
            <Downshift
                itemToString={unitConverterToString}
                onInputValueChange={inputValue => onSuggestionChanged(inputValue, "Cookery", 5)}
                onChange={onConverterChanged}
            >
                {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
                    <div className={classes.container}>
                        {renderInput({
                            usage: "Cookery",
                            onSuggestionChanged,
                            fullWidth: true,
                            classes,
                            InputProps: getInputProps({
                                placeholder: 'Search for a unit',
                                id: 'integration-downshift-simple',
                            }),
                        })}
                        {isOpen ? (
                            <Paper className={classes.paper} square>
                                {suggestions.map((suggestion, index) =>
                                    renderSuggestion({
                                        suggestion,
                                        index,
{'fraction_non_alphanumeric': 0.0991204802457071, 'fraction_numerical': 0.003629764065335753, 'mean_word_length': 1.6260997067448681, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3831552', 'n_tokens_mistral': 1793, 'n_tokens_neox': 1716, 'n_words': 352}