{"size": 1518, "ext": "js", "max_stars_repo_path": "src/services/CountrySelect.js", "max_stars_repo_name": "CourtHive/TMX", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/services/CountrySelect.js", "max_issues_repo_name": "CourtHive/TMX", "max_issues_repo_issues_event_min_datetime": "2021-04-14T10:41:26.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-30T09:05:24.000Z", "max_forks_repo_path": "src/services/CountrySelect.js", "max_forks_repo_name": "CourtHive/TMX", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 25.7288135593, "max_line_length": 93, "alphanum_fraction": 0.5718050066}
import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from '@material-ui/core/styles';

import Autocomplete from '@material-ui/lab/Autocomplete';
import { TextField } from '@material-ui/core';

import { fixtures } from 'tods-competition-factory';
const { countries, countryToFlag } = fixtures;

const useStyles = makeStyles({
  option: {
    fontSize: 15,
    '& > span': {
      marginRight: 10,
      fontSize: 18
    }
  }
});

export function CountrySelect({ label, selection, options, onChange, enableAll, inputRef }) {
  const classes = useStyles();
  const { t } = useTranslation();
  return (
    <Autocomplete
      autoHighlight
      options={enableAll ? countries : options}
      value={selection}
      autoComplete={true}
      onChange={onChange}
      style={{ width: 'auto' }}
      disableClearable={true}
      classes={{ option: classes.option }}
      getOptionLabel={(option) => option.label}
      renderOption={(option) => (
        <React.Fragment>
          <span>{countryToFlag(option.iso || '')}</span>
          {option.label}
        </React.Fragment>
      )}
      renderInput={(params) => (
        <TextField
          fullWidth
          {...params}
          label={label}
          // variant="outlined"
          placeholder={`${t('select')}...`}
          value={selection}
          name={'country'}
          inputRef={inputRef}
          inputProps={{
            ...params.inputProps
          }}
        />
      )}
    />
  );
}
