const {
  React: { Fragment, useEffect, useReducer, useRef },
  ReactDOM: { render },
} = window


const PATH =
  'M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544'

const INITIAL_STATE = {
  alternate: false,
  path: PATH,
  svg: true,
  height: 79.375,
  width: 79.375,
  threeD: false,
}

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE':
      return { ...state, [action.name]: action.value }
    case 'DROP':
      return { ...state, ...action.data }
    default:
      return state
  }
}

const App = () => {
  const containerRef = useRef(null)
  const elementRef = useRef(null)
  const pathRef = useRef(null)
  const svgRef = useRef(null)
  const motionPathRef = useRef(null)
  const [state, dispatch] = useReducer(formReducer, INITIAL_STATE)
  const { alternate, path, svg, threeD, width, height } = state

  const onFileDrop = e => {
    e.preventDefault()
    const file = e.dataTransfer.files[0]
    if (
      file.type === 'image/svg+xml' ||
      file.name.slice(file.name.length - 4) === '.svg'
    ) {
      // process the file.
      const reader = new FileReader()
      reader.onloadend = response => {
        try {
          // file.target.result is the SVG markup we want to use.
          const wrapper = document.createElement('div')
          wrapper.innerHTML = response.target.result
          const svg = wrapper.querySelector('svg')
          const path = wrapper.querySelector('path')
          const viewBox = svg.getAttribute('viewBox').split(' ') // 0 0 x2 y2
          const pathString = path.getAttribute('d')
          dispatch({
            type: 'DROP',
            data: {
              path: pathString,
              width: viewBox[2],
              height: viewBox[3],
            },
          })
        } catch (e) {
          throw Error('Something went wrong', e)
        }
      }
      reader.readAsText(file)
    }
  }

  const prevent = e => e.preventDefault()

  const updateField = e =>
    dispatch({
      type: 'UPDATE',
      name: e.target.name,
      value: e.target.type === 'checkbox' ? e.target.checked : e.target.value,
    })

  useEffect(() => {
    if (containerRef.current) {
      const containerRefObserver = new ResizeObserver(entries => {
        if (motionPathRef.current) {
          const newPath = motionPathRef.current.generatePath(containerRef.current.offsetWidth, containerRef.current.offsetHeight)
          containerRef.current.style.setProperty('--path', `"${newPath}"`)
          pathRef.current.setAttribute('d', newPath)
        }
      })
      containerRefObserver.observe(containerRef.current)
    }
  }, [])

  useEffect(() => {
    if (containerRef.current && elementRef.current) {
      // Set up the initial responsive motion path
      motionPathRef.current = new Meanderer({
        path,
        height,
        width,
      })
      const newPath = motionPathRef.current.generatePath(containerRef.current.offsetWidth, containerRef.current.offsetHeight)
      containerRef.current.style.setProperty('--path', `"${newPath}"`)
      pathRef.current.setAttribute('d', newPath)
    }
  }, [path, width, height])

  useEffect(() => {
    document.body.addEventListener('dragover', prevent)
    document.body.addEventListener('drop', onFileDrop)
    return () => {
      document.body.removeEventListener('dragover', prevent)
      document.body.removeEventListener('drop', onFileDrop)
    }
  }, [])

  const hue = Math.random() * 360

  return (
    <Fragment>
      <div
        ref={containerRef}
        className="container"
        style={{
          '--rotation': threeD ? 75 : 0,
          overflow: threeD ? 'visible' : 'hidden',
        }}>
        <svg
          {...(!svg && { hidden: true })}
          ref={svgRef}
          style={{
            '--hue': hue,
          }}>
          <path ref={pathRef}></path>
        </svg>
        <div
          ref={elementRef}
          style={{
            '--animation-direction': alternate ? 'alternate' : 'normal',
            '--transform-style': threeD ? 'preserve-3d' : 'none',
          }}
          className="motion-element">
          <div className="motion-element__side"></div>
          <div className="motion-element__side"></div>
          <div className="motion-element__side"></div>
          <div className="motion-element__side"></div>
          <div className="motion-element__side"></div>
          <div className="motion-element__side"></div>
        </div>
      </div>
      <p
        style={{
          '--hue': hue,
        }}>
        Drag and drop an optimized SVG file onto the page that contains a path.
        Clean up your SVG first with{' '}
        <a
          href="https://jakearchibald.github.io/svgomg/"
          target="_blank"
          rel="noreferrer noopener">
          SVGOMG
        </a>
        . Alternatively, manually enter path info into the configuration form
        below.
      </p>
      <p>
        Resize the viewport and see your motion path scale!{' '}
        <span aria-label="TADA!" role="img">
          🎉
        </span>
      </p>
      <details>
        <summary>Path configuration</summary>
        <form onDrop={onFileDrop}>
          <section className="form-field">
            <label htmlFor="path">Path</label>
            <input
              id="path"
              type="text"
              name="path"
              value={path}
              onChange={updateField}
            />
          </section>
          <section className="form-field">
            <label htmlFor="width">Initial Width (viewBox x2)</label>
            <input
              id="with"
              type="number"
              name="width"
              value={width}
              onChange={updateField}
            />
          </section>
          <section className="form-field">
            <label htmlFor="height">Initial Height (viewBox y2)</label>
            <input
              id="height"
              type="number"
              name="height"
              value={height}
              onChange={updateField}
            />
          </section>
          <section className="form-field form-field--grid">
            <label htmlFor="svg">Show SVG path?</label>
            <input
              id="svg"
              type="checkbox"
              name="svg"
              checked={svg}
              onChange={updateField}
            />
            <label htmlFor="alternate">Alternate direction?</label>
            <input
              id="alternate"
              type="checkbox"
              name="alternate"
              checked={alternate}
              onChange={updateField}
            />
            <label htmlFor="threeD">See path in 3D?</label>
            <input
              id="threeD"
              type="checkbox"
              name="threeD"
              checked={threeD}
              onChange={updateField}
            />
          </section>
          <section className="form-field form-field--grid">
            <button
              onClick={e => {
                e.preventDefault()
                containerRef.current.removeAttribute('style')
              }}>
              Reset container size
            </button>
          </section>
        </form>
      </details>
    </Fragment>
  )
}

render(<App />, document.getElementById('app'))