content: /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
  
  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Paper from '@material-ui/core/Paper';
  import clsx from 'clsx';
  import InputBase from '@material-ui/core/InputBase';
  import Typography from '@material-ui/core/Typography';
  import PropTypes from 'prop-types';
  import { debounce } from 'lodash';
  import Grid from '@material-ui/core/Grid';
  import Dialog from '@material-ui/core/Dialog';
  import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
  import DialogActions from '@material-ui/core/DialogActions';
  import DialogContent from '@material-ui/core/DialogContent';
  import DialogTitle from '@material-ui/core/DialogTitle';
  import IconButton from '@material-ui/core/IconButton';
  import Tooltip from '@material-ui/core/Tooltip';
  import Button from '@material-ui/core/Button';
  import FlexSearch from 'flexsearch';
  import SearchIcon from '@material-ui/icons/Search';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import RadioGroup from '@material-ui/core/RadioGroup';
  import Radio from '@material-ui/core/Radio';
  import Link from 'docs/src/modules/components/Link';
  import * as mui from '@material-ui/icons';
  import synonyms from './synonyms';
  
  // Working on the logic? Uncomment these imports.
  // It will be x10 faster than working with all of the icons.
  
  // import Menu from '@material-ui/icons/Menu';
  // import MenuOutlined from '@material-ui/icons/MenuOutlined';
  // import MenuRounded from '@material-ui/icons/MenuRounded';
  // import MenuTwoTone from '@material-ui/icons/MenuTwoTone';
  // import MenuSharp from '@material-ui/icons/MenuSharp';
  // import ExitToApp from '@material-ui/icons/ExitToApp';
  // import ExitToAppOutlined from '@material-ui/icons/ExitToAppOutlined';
  // import ExitToAppRounded from '@material-ui/icons/ExitToAppRounded';
  // import ExitToAppTwoTone from '@material-ui/icons/ExitToAppTwoTone';
  // import ExitToAppSharp from '@material-ui/icons/ExitToAppSharp';
  // import Delete from '@material-ui/icons/Delete';
  // import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
  // import DeleteRounded from '@material-ui/icons/DeleteRounded';
  // import DeleteTwoTone from '@material-ui/icons/DeleteTwoTone';
  // import DeleteSharp from '@material-ui/icons/DeleteSharp';
  // import DeleteForever from '@material-ui/icons/DeleteForever';
  // import DeleteForeverOutlined from '@material-ui/icons/DeleteForeverOutlined';
  // import DeleteForeverRounded from '@material-ui/icons/DeleteForeverRounded';
  // import DeleteForeverTwoTone from '@material-ui/icons/DeleteForeverTwoTone';
  // import DeleteForeverSharp from '@material-ui/icons/DeleteForeverSharp';
  
  // const mui = {
  //   ExitToApp,
  //   ExitToAppOutlined,
  //   ExitToAppRounded,
  //   ExitToAppTwoTone,
  //   ExitToAppSharp,
  //   Menu,
  //   MenuOutlined,
  //   MenuRounded,
  //   MenuTwoTone,
  //   MenuSharp,
  //   Delete,
  //   DeleteOutlined,
  //   DeleteRounded,
  //   DeleteTwoTone,
  //   DeleteSharp,
  //   DeleteForever,
  //   DeleteForeverOutlined,
  //   DeleteForeverRounded,
  //   DeleteForeverTwoTone,
  //   DeleteForeverSharp,
  // };
  
  function selectNode(node) {
    // Clear any current selection
    const selection = window.getSelection();
    selection.removeAllRanges();
  
    // Select code
    const range = document.createRange();
    range.selectNodeContents(node);
    selection.addRange(range);
  }
  
  let Icons = props => {
    const { icons, classes, handleClickOpen } = props;
  
    const handleClick = event => {
      selectNode(event.currentTarget);
    };
  
    return (
      <div>
        {icons.map(icon => {
          return (
            <span key={icon.key} className={clsx('markdown-body', classes.icon)}>
              <icon.Icon
                tabIndex={-1}
                onClick={handleClickOpen}
                title={icon.key}
                className={classes.iconSvg}
              />
              <p onClick={handleClick}>{icon.key}</p>
            </span>
          );
        })}
      </div>
    );
  };
  
  Icons.propTypes = {
    classes: PropTypes.object.isRequired,
    handleClickOpen: PropTypes.func.isRequired,
    icons: PropTypes.array.isRequired,
  };
  Icons = React.memo(Icons);
  
  const useDialogStyles = makeStyles(theme => ({
    markdown: {
      '& pre': {
        borderRadius: 0,
        margin: 0,
      },
    },
    import: {
      textAlign: 'right',
      padding: theme.spacing(0.5, 1),
    },
    container: {
      marginBottom: theme.spacing(5),
    },
    canvas: {
      fontSize: 210,
      marginTop: theme.spacing(2),
      color: theme.palette.primary.dark,
      backgroundSize: '30px 30px',
      backgroundColor: '#fff',
      backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0px',
      backgroundImage:
        'linear-gradient(45deg, #f4f4f4 25%, transparent 25%), linear-gradient(-45deg, #f4f4f4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f4f4f4 75%), linear-gradient(-45deg, transparent 75%, #f4f4f4 75%)',
    },
    fontSize: {
      margin: theme.spacing(2),
    },
    context: {
      margin: theme.spacing(0.5),
      padding: theme.spacing(1, 2),
      borderRadius: theme.shape.borderRadius,
      boxSizing: 'content-box',
    },
    contextPrimary: {
      color: theme.palette.primary.main,
    },
    contextPrimaryInverse: {
      color: theme.palette.primary.contrastText,
      backgroundColor: theme.palette.primary.main,
    },
    contextTextPrimary: {
      color: theme.palette.text.primary,
    },
    contextTextPrimaryInverse: {
      color: theme.palette.background.paper,
      backgroundColor: theme.palette.text.primary,
    },
    contextTextSecondary: {
      color: theme.palette.text.secondary,
    },
    contextTextSecondaryInverse: {
      color: theme.palette.background.paper,
      backgroundColor: theme.palette.text.secondary,
    },
  }));
  
  let DialogDetails = props => {
    const classes = useDialogStyles();
    const { open, selectedIcon, handleClose } = props;
  
    const handleClick = event => {
      selectNode(event.currentTarget);
    };
  
    return (
      <Dialog
        fullWidth
        maxWidth="sm"
        open={open}
        onClose={handleClose}
        aria-labelledby="icon-dialog-title"
      >
        {selectedIcon ? (
          <React.Fragment>
            <DialogTitle id="icon-dialog-title" onClick={handleClick}>
              {selectedIcon.key}
            </DialogTitle>
            <MarkdownElement
              className={classes.markdown}
              onClick={handleClick}
              text={`\`\`\`js\nimport ${selectedIcon.key}Icon from '@material-ui/icons/${
                selectedIcon.key
              }';\n\`\`\``}
            />
            <Link
              className={classes.import}
              color="textSecondary"
              href="/components/icons/"
              variant="caption"
            >
              Learn more about the import
            </Link>
            <DialogContent>
              <Grid container className={classes.container}>
                <Grid item xs={12} sm="auto">
                  <Grid container justify="center">
                    <selectedIcon.Icon className={classes.canvas} />
                  </Grid>
                </Grid>
                <Grid item xs>
                  <Grid container alignItems="flex-end" justify="center">
                    <Grid item>
                      <Tooltip title="fontSize small">
                        <selectedIcon.Icon className={classes.fontSize} fontSize="small" />
                      </Tooltip>
                    </Grid>
                    <Grid item>
                      <Tooltip title="fontSize medium">
                        <selectedIcon.Icon className={classes.fontSize} />
                      </Tooltip>
                    </Grid>
                    <Grid item>
                      <Tooltip title="fontSize large">
                        <selectedIcon.Icon className={classes.fontSize} fontSize="large" />
                      </Tooltip>
                    </Grid>
                  </Grid>
                  <Grid container justify="center">
                    <selectedIcon.Icon className={clsx(classes.context, classes.contextPrimary)} />
                    <selectedIcon.Icon
                      className={clsx(classes.context, classes.contextPrimaryInverse)}
                    />
                  </Grid>
                  <Grid container justify="center">
                    <selectedIcon.Icon
                      className={clsx(classes.context, classes.contextTextPrimary)}
                    />
                    <selectedIcon.Icon
                      className={clsx(classes.context, classes.contextTextPrimaryInverse)}
                    />
                  </Grid>
                  <Grid container justify="center">
                    <selectedIcon.Icon
                      className={clsx(classes.context, classes.contextTextSecondary)}
                    />
                    <selectedIcon.Icon
                      className={clsx(classes.context, classes.contextTextSecondaryInverse)}
                    />
                  </Grid>
                </Grid>
              </Grid>
            </DialogContent>
            <DialogActions>
              <Button onClick={handleClose} color="primary">
                Close
              </Button>
            </DialogActions>
          </React.Fragment>
        ) : (
          <div />
        )}
      </Dialog>
    );
  };
  
  DialogDetails.propTypes = {
    handleClose: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
    selectedIcon: PropTypes.object,
  };
  DialogDetails = React.memo(DialogDetails);
  
  const useStyles = makeStyles(theme => ({
    form: {
      margin: theme.spacing(2, 0),
    },
    paper: {
      position: 'sticky',
      top: 80,
      padding: '2px 4px',
      display: 'flex',
      alignItems: 'center',
      marginBottom: theme.spacing(2),
      width: '100%',
    },
    input: {
      marginLeft: 8,
      flex: 1,
    },
    iconButton: {
      padding: 10,
    },
    icon: {
      display: 'inline-block',
      width: 86,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      textAlign: 'center',
      color: theme.palette.text.secondary,
      margin: '0 4px',
      fontSize: 12,
      '& p': {
        margin: 0,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
    },
    iconSvg: {
      boxSizing: 'content-box',
      cursor: 'pointer',
      color: theme.palette.text.primary,
      borderRadius: theme.shape.borderRadius,
      transition: theme.transitions.create(['background-color', 'box-shadow'], {
        duration: theme.transitions.duration.shortest,
      }),
      fontSize: 40,
      padding: theme.spacing(2),
      margin: theme.spacing(0.5, 0),
      '&:hover': {
        backgroundColor: theme.palette.background.paper,
        boxShadow: theme.shadows[1],
      },
    },
    results: {
      marginBottom: theme.spacing(1),
    },
  }));
  
  const searchIndex = FlexSearch.create({
    async: true,
    tokenize: 'full',
  });
  
  const allIconsMap = {};
  const allIcons = Object.keys(mui)
    .sort()
    .map(key => {
      let tag;
      if (key.indexOf('Outlined') !== -1) {
        tag = 'Outlined';
      } else if (key.indexOf('TwoTone') !== -1) {
        tag = 'Two tone';
      } else if (key.indexOf('Rounded') !== -1) {
        tag = 'Rounded';
      } else if (key.indexOf('Sharp') !== -1) {
        tag = 'Sharp';
      } else {
        tag = 'Filled';
      }
  
      let searchable = key.replace(/(Outlined|TwoTone|Rounded|Sharp)$/, '');
      if (synonyms[searchable]) {
        searchable += ` ${synonyms[searchable]}`;
      }
      searchIndex.add(key, searchable);
  
      const icon = {
        key,
        tag,
        Icon: mui[key],
      };
      allIconsMap[key] = icon;
      return icon;
    });
  
  export default function SearchIcons() {
    const classes = useStyles();
    const [tag, setTag] = React.useState('Filled');
    const [keys, setKeys] = React.useState(null);
    const [open, setOpen] = React.useState(false);
    const [selectedIcon, setSelectedIcon] = React.useState(null);
  
    const handleClickOpen = React.useCallback(event => {
      setSelectedIcon(allIconsMap[event.currentTarget.getAttribute('title')]);
      setOpen(true);
    }, []);
  
    const handleClose = React.useCallback(() => {
      setOpen(false);
    }, []);
  
    const isMounted = React.useRef(false);
    React.useEffect(() => {
      isMounted.current = true;
      return () => {
        isMounted.current = false;
      };
    }, []);
  
    const handleChange = React.useMemo(
      () =>
        debounce(value => {
          if (!isMounted.current) {
            return;
          }
  
          if (value === '') {
            setKeys(null);
          } else {
            searchIndex.search(value).then(results => {
              setKeys(results);
  
              // Keep track of the no results so we can add synonyms in the future.
              if (value.length >= 4 && results.length === 0) {
                window.ga('send', {
                  hitType: 'event',
                  eventCategory: 'material-icons',
                  eventAction: value,
                  eventLabel: 'no results',
                });
              }
            });
          }
        }, 220),
      [],
    );
  
    const icons = React.useMemo(
      () =>
        (keys === null ? allIcons : keys.map(key => allIconsMap[key])).filter(
          icon => tag === icon.tag,
        ),
      [tag, keys],
    );
  
    return (
      <Grid container>
        <Grid item xs={12} sm={3}>
          <form className={classes.form}>
            <RadioGroup>
              {['Filled', 'Outlined', 'Rounded', 'Two tone', 'Sharp'].map(key => {
                return (
                  <FormControlLabel
                    key={key}
                    control={<Radio checked={tag === key} onChange={() => setTag(key)} value={key} />}
                    label={key}
                  />
                );
              })}
            </RadioGroup>
          </form>
        </Grid>
        <Grid item xs={12} sm={9}>
          <Paper className={classes.paper}>
            <IconButton className={classes.iconButton} aria-label="search">
              <SearchIcon />
            </IconButton>
            <InputBase
              autoFocus
              onChange={event => {
                handleChange(event.target.value);
              }}
              className={classes.input}
              placeholder="Search icons…"
              inputProps={{ 'aria-label': 'search icons' }}
            />
          </Paper>
          <Typography className={classes.results}>{`${icons.length} matching results`}</Typography>
          <Icons icons={icons} classes={classes} handleClickOpen={handleClickOpen} />
        </Grid>
        <DialogDetails open={open} selectedIcon={selectedIcon} handleClose={handleClose} />
      </Grid>
    );
  }
  