/* eslint-env browser */
import React from 'react';
import ReactDOM from 'react-dom';
import YouTube from '..';

const {
  useState,
} = React;

const videos = [
  { id: 'ZuuVjuLNvFY', name: 'JUNNY - kontra (Feat. Lil Gimch, Keeflow)' },
  { id: 'PYE7jXNjFWw', name: 'T W L V - Follow' },
  { id: 'ld8ugY47cps', name: 'SLCHLD - I can\'t love you anymore' },
  { id: null, name: '<none>' },
];

const qualities = ['auto', '240', '380', '480', '720', '1080', '1440', '2160'];

const hashVideoRx = /^#!\/video\/(\d)$/;
const hash = typeof window.location !== 'undefined'
  ? window.location.hash : ''; // eslint-disable-line no-undef
const defaultVideo = hashVideoRx.test(hash)
  ? parseInt(hash.replace(hashVideoRx, '$1'), 10)
  : 0;

function App() {
  const [videoIndex, setVideoIndex] = useState(defaultVideo);
  const [suggestedQuality, setSuggestedQuality] = useState('auto');
  const [volume, setVolume] = useState(1);
  const [paused, setPaused] = useState(false);

  const video = videos[videoIndex];

  function selectVideo(index) {
    setVideoIndex(index);
  }

  function handlePause(event) {
    setPaused(event.target.checked);
  }

  function handlePlayerPause() {
    setPaused(true);
  }

  function handlePlayerPlay() {
    setPaused(false);
  }

  function handleVolume(event) {
    setVolume(parseFloat(event.target.value));
  }

  function handleQuality(event) {
    setSuggestedQuality(qualities[event.target.selectedIndex]);
  }

  return (
    <div className="row">
      <div className="col s4">
        <h5>
          Video
        </h5>
        <div className="collection">
          {videos.map((choice, index) => (
            <a
              key={choice.id}
              href={`#!/video/${index}`}
              className={`collection-item ${video === choice ? 'active' : ''}`}
              onClick={() => selectVideo(index)}
            >
              {choice.name}
            </a>
          ))}
        </div>
        <h5>
          Paused
        </h5>
        <p>
          <label htmlFor="paused">
            <input
              type="checkbox"
              id="paused"
              checked={paused}
              onChange={handlePause}
            />
            <span>Paused</span>
          </label>
        </p>
        <h5>
          Volume
        </h5>
        <input
          type="range"
          value={volume}
          min={0}
          max={1}
          step={0.01}
          onChange={handleVolume}
        />
        <h5>
          Quality
        </h5>
        <select className="browser-default" onChange={handleQuality}>
          {qualities.map((quality) => (
            <option key={quality} value={quality}>
              {quality}
            </option>
          ))}
        </select>
      </div>
      <div className="col s8 center-align">
        <YouTube
          video={video.id}
          width={640}
          height={480}
          autoplay
          controls={false}
          suggestedQuality={suggestedQuality}
          volume={volume}
          paused={paused}
          onPause={handlePlayerPause}
          onPlaying={handlePlayerPlay}
        />
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('example'));

@@ -114,16 +114,31 @@
 const %7B%0A
+  useCallback,%0A
   useSta
@@ -1077,32 +1077,29 @@
 ex);%0A  %7D%0A%0A  
-function
+const
  handlePause
@@ -1098,23 +1098,41 @@
 dlePause
+ = useCallback(
 (event)
+ =%3E
  %7B%0A    s
@@ -1162,36 +1162,39 @@
 hecked);%0A  %7D
-%0A%0A  function
+, %5B%5D);%0A%0A  const
  handlePlaye
@@ -1199,18 +1199,36 @@
 yerPause
-()
+ = useCallback(() =%3E
  %7B%0A    s
@@ -1242,36 +1242,39 @@
 d(true);%0A  %7D
-%0A%0A  function
+, %5B%5D);%0A%0A  const
  handlePlaye
@@ -1278,18 +1278,36 @@
 ayerPlay
-()
+ = useCallback(() =%3E
  %7B%0A    s
@@ -1330,40 +1330,61 @@
 %0A  %7D
-%0A%0A  function handleVolume
+, %5B%5D);%0A%0A  const handleVolume = useCallback(
 (event)
+ =%3E
  %7B%0A 
@@ -1436,41 +1436,62 @@
 %0A  %7D
-%0A%0A  function handleQuality
+, %5B%5D);%0A%0A  const handleQuality = useCallback(
 (event)
+ =%3E
  %7B%0A 
@@ -1552,24 +1552,30 @@
 Index%5D);%0A  %7D
+, %5B%5D);
 %0A%0A  return (

fix lint