text: /* eslint-disable @typescript-eslint/no-use-before-define */
  import * as React from 'react';
  import PropTypes from 'prop-types';
  import { useTheme, makeStyles } from '@material-ui/core/styles';
  import Popper from '@material-ui/core/Popper';
  import ClickAwayListener from '@material-ui/core/ClickAwayListener';
  import SettingsIcon from '@material-ui/icons/Settings';
  import CloseIcon from '@material-ui/icons/Close';
  import DoneIcon from '@material-ui/icons/Done';
  import Autocomplete from '@material-ui/core/Autocomplete';
  import ButtonBase from '@material-ui/core/ButtonBase';
  import InputBase from '@material-ui/core/InputBase';
  
  function PopperComponent(props) {
    const { disablePortal, anchorEl, open, ...other } = props;
    return <div {...other} />;
  }
  
  PopperComponent.propTypes = {
    anchorEl: PropTypes.any,
    disablePortal: PropTypes.bool,
    open: PropTypes.bool.isRequired,
  };
  
  const useStyles = makeStyles((theme) => ({
    root: {
      width: 221,
      fontSize: 13,
    },
    button: {
      fontSize: 13,
      width: '100%',
      textAlign: 'left',
      paddingBottom: 8,
      color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
      fontWeight: 600,
      '&:hover,&:focus': {
        color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
      },
      '& span': {
        width: '100%',
      },
      '& svg': {
        width: 16,
        height: 16,
      },
    },
    tag: {
      marginTop: 3,
      height: 20,
      padding: '.15em 4px',
      fontWeight: 600,
      lineHeight: '15px',
      borderRadius: 2,
    },
    popper: {
      border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
      boxShadow: `0 8px 24px ${
        theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
      }`,
      borderRadius: 6,
      width: 300,
      zIndex: theme.zIndex.modal,
      fontSize: 13,
      color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
      backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
    },
    header: {
      borderBottom: `1px solid ${
        theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
      }`,
      padding: '8px 10px',
      fontWeight: 600,
    },
    inputBase: {
      padding: 10,
      width: '100%',
      borderBottom: `1px solid ${
        theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
      }`,
      '& input': {
        borderRadius: 4,
        backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
        padding: 8,
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`,
        fontSize: 14,
        '&:focus': {
          boxShadow: `0px 0px 0px 3px ${
            theme.palette.mode === 'light'
              ? 'rgba(3, 102, 214, 0.3)'
              : 'rgb(12, 45, 107)'
          }`,
          borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
        },
      },
    },
    paper: {
      boxShadow: 'none',
      margin: 0,
      color: 'inherit',
      fontSize: 13,
    },
    listbox: {
      backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
      padding: 0,
      '& .MuiAutocomplete-option': {
        minHeight: 'auto',
        alignItems: 'flex-start',
        padding: 8,
        borderBottom: `1px solid  ${
          theme.palette.mode === 'light' ? ' #eaecef' : '#30363d'
        }`,
        '&[aria-selected="true"]': {
          backgroundColor: 'transparent',
        },
        '&[data-focus="true"], &[data-focus="true"][aria-selected="true"]': {
          backgroundColor: theme.palette.action.hover,
        },
      },
    },
    popperDisablePortal: {
      position: 'relative',
    },
    iconSelected: {
      width: 17,
      height: 17,
      marginRight: 5,
      marginLeft: -2,
    },
    color: {
      width: 14,
      height: 14,
      flexShrink: 0,
      borderRadius: 3,
      marginRight: 8,
      marginTop: 2,
    },
    text: {
      flexGrow: 1,
      '& span': {
        color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
      },
    },
    close: {
      opacity: 0.6,
      width: 18,
      height: 18,
    },
  }));
  
  export default function GitHubLabel() {
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [value, setValue] = React.useState([labels[1], labels[11]]);
    const [pendingValue, setPendingValue] = React.useState([]);
    const theme = useTheme();
  
    const handleClick = (event) => {
      setPendingValue(value);
      setAnchorEl(event.currentTarget);
    };
  
    const handleClose = () => {
      setValue(pendingValue);
      if (anchorEl) {
        anchorEl.focus();
      }
      setAnchorEl(null);
    };
  
    const open = Boolean(anchorEl);
    const id = open ? 'github-label' : undefined;
  
    return (
      <React.Fragment>
        <div className={classes.root}>
          <ButtonBase
            disableRipple
            className={classes.button}
            aria-describedby={id}
            onClick={handleClick}
          >
            <span>Labels</span>
            <SettingsIcon />
          </ButtonBase>
          {value.map((label) => (
            <div
              key={label.name}
              className={classes.tag}
              style={{
                backgroundColor: label.color,
                color: theme.palette.getContrastText(label.color),
              }}
            >
              {label.name}
            </div>
          ))}
        </div>
        <Popper
          id={id}
          open={open}
          anchorEl={anchorEl}
          placement="bottom-start"
          className={classes.popper}
        >
          <ClickAwayListener onClickAway={handleClose}>
            <div>
              <div className={classes.header}>Apply labels to this pull request</div>
              <Autocomplete
                open
                multiple
                onClose={(event, reason) => {
                  if (reason === 'escape') {
                    handleClose();
                  }
                }}
                classes={{
                  paper: classes.paper,
                  listbox: classes.listbox,
                  popperDisablePortal: classes.popperDisablePortal,
                }}
                value={pendingValue}
                onChange={(event, newValue, reason) => {
                  if (
                    event.type === 'keydown' &&
                    event.key === 'Backspace' &&
                    reason === 'remove-option'
                  ) {
                    return;
                  }
                  setPendingValue(newValue);
                }}
                disableCloseOnSelect
                PopperComponent={PopperComponent}
                renderTags={() => null}
                noOptionsText="No labels"
                renderOption={(props, option, { selected }) => (
                  <li {...props}>
                    <DoneIcon
                      className={classes.iconSelected}
                      style={{
                        visibility: selected ? 'visible' : 'hidden',
                      }}
                    />
                    <span
                      className={classes.color}
                      style={{ backgroundColor: option.color }}
                    />
                    <div className={classes.text}>
                      {option.name}
                      <br />
                      <span>{option.description}</span>
                    </div>
                    <CloseIcon
                      className={classes.close}
                      style={{
                        visibility: selected ? 'visible' : 'hidden',
                      }}
                    />
                  </li>
                )}
                options={[...labels].sort((a, b) => {
                  // Display the selected labels first.
                  let ai = value.indexOf(a);
                  ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
                  let bi = value.indexOf(b);
                  bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
                  return ai - bi;
                })}
                getOptionLabel={(option) => option.name}
                renderInput={(params) => (
                  <InputBase
                    ref={params.InputProps.ref}
                    inputProps={params.inputProps}
                    autoFocus
                    placeholder="Filter labels"
                    className={classes.inputBase}
                  />
                )}
              />
            </div>
          </ClickAwayListener>
        </Popper>
      </React.Fragment>
    );
  }
  
  // From https://github.com/abdonrd/github-labels
  const labels = [
    {
      name: 'good first issue',
      color: '#7057ff',
      description: 'Good for newcomers',
    },
    {
      name: 'help wanted',
      color: '#008672',
      description: 'Extra attention is needed',
    },
    {
      name: 'priority: critical',
      color: '#b60205',
      description: '',
    },
    {
      name: 'priority: high',
      color: '#d93f0b',
      description: '',
    },
    {
      name: 'priority: low',
      color: '#0e8a16',
      description: '',
    },
    {
      name: 'priority: medium',
      color: '#fbca04',
      description: '',
    },
    {
      name: "status: can't reproduce",
      color: '#fec1c1',
      description: '',
    },
    {
      name: 'status: confirmed',
      color: '#215cea',
      description: '',
    },
    {
      name: 'status: duplicate',
      color: '#cfd3d7',
      description: 'This issue or pull request already exists',
    },
    {
      name: 'status: needs information',
      color: '#fef2c0',
      description: '',
    },
    {
      name: 'status: wont do/fix',
      color: '#eeeeee',
      description: 'This will not be worked on',
    },
    {
      name: 'type: bug',
      color: '#d73a4a',
      description: "Something isn't working",
    },
    {
      name: 'type: discussion',
      color: '#d4c5f9',
      description: '',
    },
    {
      name: 'type: documentation',
      color: '#006b75',
      description: '',
    },
    {
      name: 'type: enhancement',
      color: '#84b6eb',
      description: '',
    },
    {
      name: 'type: epic',
      color: '#3e4b9e',
      description: 'A theme of work that contain sub-tasks',
    },
    {
      name: 'type: feature request',
      color: '#fbca04',
      description: 'New feature or request',
    },
    {
      name: 'type: question',
      color: '#d876e3',
      description: 'Further information is requested',
    },
  ];
  