import React, { FunctionComponent, useRef, useState } from 'react'
import styled from 'styled-components'

const NoOverflowBox = styled(Box)`
  overflow-x: hidden;
` as typeof Box

export const DragToScroll: FunctionComponent<{}> = (props) => {
  const [isMouseDown, setMouseDown] = useState(false)
  const [lastXpos, setLastXpos] = useState(0)
  const scrollableRef = useRef<!!|>(null)

  const onMouseUp = () => setMouseDown(false)
  const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    setLastXpos(event.pageX)
    setMouseDown(true)
  }
  const onMouseMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    if (!isMouseDown) return
    if (scrollableRef.current) {
      const currentScroll = scrollableRef.current.scrollLeft
      const deltaX = (event.pageX - lastXpos) / 2
      scrollableRef.current.scroll(Math.max(0, currentScroll + deltaX), 0)
    }
  }

  return (
    <NoOverflowBox
      ref={scrollableRef}
      onMouseLeave={onMouseUp}
      onMouseMove={onMouseMove}
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      direction="row"
    >
      {props.children}
    </NoOverflowBox>
  )
}