import React from 'react';
import styled from 'styled-components';
import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import ECG from "./ECG";
import { useEffect, useRef, useState } from 'react';
import { distanceBetweenPoints } from '../ecg/canvas-functions'



const SViewport = styled.div.attrs(
  ({left}) => ({
    style: {
      left: left+"px"
    }
  })
)`
  box-sizing: border-box;
  min-width: 260px;
  height: 100%;
  position: absolute;
  z-index: 2;

  border: 1px solid #BFBFBF;
  background-color: #F2F2F233;
  cursor: grab;
  `
  
  
  /* const SViewport = styled.div`
  
  box-sizing: border-box;
  min-width: 260px;
  height: 100%;
  position: absolute;
  z-index: 2;

  border: 1px solid #BFBFBF;
  background-color: #F2F2F233;
  cursor: grab;

  ${props => props.left && `left: ${props.left}px;`}
`
 */
/* 
    border: 1px solid steelblue;
    background-color: rgba(70, 130, 180, 0.1); 
  */
  /* resize: horizontal;
  overflow: scroll; */

const Viewport = ({ onViewportChange, live, lastDrawn, msScale }) => {
  const viewportRef = useRef();
  const pos1 = useRef();
  const pos3 = useRef();
  const offsetLeft = 80;
  const [left, setLeft] = useState(offsetLeft);


  useEffect(() => {
    //console.log(`Set left to follow last point drawed`);

    if(live && lastDrawn){ 

      const viewportWidth = viewportRef.current.offsetWidth;
      const parentWidth = viewportRef.current.closest(".canvas-container").offsetWidth;

      const miniatureScale = 0.5;  //TODO: READ FROM INDEX AND CREATE CLASS ECGPanelController

      const dx = distanceBetweenPoints(msScale);

      const right = (lastDrawn * dx )* miniatureScale;
      const left = Math.round(right - viewportWidth);
      
      const cleft = Math.max(offsetLeft,left+offsetLeft);
      Math.max(offsetLeft,left+offsetLeft) //check width!
      
      if(right <= parentWidth - offsetLeft){
        setLeft(cleft);

      }
    }
  },[live, lastDrawn])


  function handleMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3.current = e.clientX;

    viewportRef.current.style.cursor = "grabbing";
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();

    // calculate the new cursor position:
    const elmnt = viewportRef.current;
    pos1.current = pos3.current - e.clientX;
    pos3.current = e.clientX;
    const left = elmnt.offsetLeft - pos1.current; 
    const width = elmnt.offsetWidth;
    const right = left + width;

    const canvasContainer = elmnt.closest(".canvas-container");
    const canvasContent = canvasContainer.querySelector(".canvas-content");
    const canvasContentOffset = canvasContent.offsetLeft;
    const parentWidth = elmnt.closest(".canvas-container").offsetWidth;

    // set the element's new position
    if(left >= canvasContentOffset && right <= parentWidth) {
      setLeft(left);
      typeof onViewportChange === "function" && onViewportChange(
        {
          left: left-canvasContentOffset,
          right: right-canvasContentOffset,
        })
    }
  }


  function closeDragElement(ev) {
    document.onmouseup = null;
    document.onmousemove = null;
  }



  return (
    <SViewport
      ref={viewportRef}
      left={left}
      onMouseDown={handleMouseDown}

    >
      <div className="drag-indicator-left">
        <FontAwesomeIcon icon={faCaretLeft}></FontAwesomeIcon>
      </div>
      <div className="drag-indicator-right">
        <FontAwesomeIcon icon={faCaretRight}></FontAwesomeIcon>
      </div>
    </SViewport>
  )
}


const EcgNavigator = ({ width, height, onViewportChange, live, lastDrawn, msScale }) => {
  return (
    <ECG
      style={{
        marginTop: "12px",
        border: "1px solid #F2F2F2"
      }}
      canvasId={"dii-miniature"}
      backgroundGrid={false}
      derivation={"dii-miniature"}
      dataDerivation={"dii"}
      canPin={false}
      label={"II"}
      height={height}
      width={width}>
      <Viewport 
        onViewportChange={onViewportChange} 
        live={live}
        lastDrawn={lastDrawn}
        msScale={msScale}
      />
    </ECG>

  )
}
export default EcgNavigator;