/* @flow */

import { FieldTextStateless as TextField } from '@atlaskit/field-text';
import { makeStyles } from '@material-ui/core/styles';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';

import { getFieldValue } from '../../base/react';
import { isSpeakerStatsSearchDisabled } from '../functions';

const useStyles = makeStyles(() => {
    return {
        speakerStatsSearch: {
            position: 'absolute',
            right: '50px',
            top: '-5px'
        }
    };
});

/**
 * The type of the React {@code Component} props of {@link SpeakerStatsSearch}.
 */
type Props = {

    /**
     * The function to initiate the change in the speaker stats table.
     */
    onSearch: Function,

};

/**
 * React component for display an individual user's speaker stats.
 *
 * @returns {React$Element<any>}
 */
function SpeakerStatsSearch({ onSearch }: Props) {
    const classes = useStyles();
    const { t } = useTranslation();
    const [ searchValue, setSearchValue ] = useState<string>('');
    const onChange = useCallback((evt: Event) => {
        const value = getFieldValue(evt);

        setSearchValue(value);

        onSearch && onSearch(value);
    }, []);
    const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);

    if (disableSpeakerStatsSearch) {
        return null;
    }

    return (
        <div className = { classes.speakerStatsSearch }>
            <TextField
                autoComplete = 'off'
                autoFocus = { false }
                compact = { true }
                name = 'speakerStatsSearch'
                onChange = { onChange }
                placeholder = { t('speakerStats.search') }
                shouldFitContainer = { false }
                type = 'text'
                value = { searchValue } />
        </div>
    );
}

export default SpeakerStatsSearch;