import React, {useEffect, useState} from 'react';
import {fromEvent} from 'rxjs';
import {takeUntil, mergeMap, map} from 'rxjs/operators';
import {disableBodyScroll} from 'body-scroll-lock';

import Header from './Header';

const canvasStyle = {
  border: 'solid 5px black',
  backgroundColor: '#eceff1',
};
const divStyle = {
  marginTop: '5%',
  width: '100%',
};
const btnStyle = {
  marginLeft: '1%',
  marginTop: '1%',
};
const whiteboardColor = {
  position: 'relative',
  float: 'left',
  width: '35px',
  height: '35px',
  margin: '1%',
  border: 'solid 1px black',
  cursor: 'pointer',
  borderRadius: '50%',
};
const blackPen = {
  backgroundColor: 'black',
};
const redPen = {
  backgroundColor: 'red',
};
const bluePen = {
  backgroundColor: 'blue',
};
const greenPen = {
  backgroundColor: 'green',
};
const yellowPen = {
  backgroundColor: 'yellow',
};

const getWindowDimensions = () => {
  const {innerWidth: width, innerHeight: height} = window;
  return {
    width,
    height,
  };
};

const useWindowDimensions = () => {
  const [windowDimensions, setWindowDimensions] = useState (
    getWindowDimensions ()
  );

  useEffect (() => {
    const handleResize = () => {
      setWindowDimensions (getWindowDimensions ());
    };

    window.addEventListener ('resize', handleResize);
    return () => window.removeEventListener ('resize', handleResize);
  }, []);

  return windowDimensions;
};

const Whiteboard = () => {
  const [x, setX] = useState (null);
  const [y, setY] = useState (null);
  const {height, width} = useWindowDimensions ();

  const startPaint = (reset = false) => {
    const canvas = document.querySelector ('#my-canvas');
    const ctx = canvas.getContext ('2d');
    if (width < 800) {
      canvas.height = 300;
      canvas.width = 300;
    } else {
      canvas.height = 500;
      canvas.width = 900;
    }
    ctx.lineWidth = 5;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';
    const changeColor = col => {
      ctx.strokeStyle = col;
    };
    const pos = {x: 0, y: 0};

    //change colors
    fromEvent (document.getElementById ('red-pen'), 'click').subscribe (() => {
      changeColor ('red');
    });
    fromEvent (document.getElementById ('blue-pen'), 'click').subscribe (() => {
      changeColor ('blue');
    });
    fromEvent (
      document.getElementById ('green-pen'),
      'click'
    ).subscribe (() => {
      changeColor ('green');
    });
    fromEvent (
      document.getElementById ('yellow-pen'),
      'click'
    ).subscribe (() => {
      changeColor ('yellow');
    });
    fromEvent (
      document.getElementById ('black-pen'),
      'click'
    ).subscribe (() => {
      changeColor ('black');
    });

    //mouse movements
    const setPosition = e => {
      pos.x = e.clientX - canvas.offsetLeft;
      pos.y = e.clientY - canvas.offsetTop;
      return [pos.x, pos.y];
    };

    const paint = e => {
      ctx.beginPath ();
      if (x && y) {
        ctx.moveTo (x, y);
        ctx.lineTo (x, y);
      } else {
        ctx.moveTo (pos.x, pos.y);
        setPosition (e);
        ctx.lineTo (pos.x, pos.y);
      }
      ctx.stroke ();
      ctx.closePath ();
    };

    const move$ = fromEvent (canvas, 'mousemove');
    const up$ = fromEvent (canvas, 'mouseup');
    const down$ = fromEvent (canvas, 'mousedown').pipe (
      map (e => {
        const vals = setPosition (e);
        setX (vals[0]);
        setY (vals[1]);
      })
    );

    const paints$ = down$.pipe (mergeMap (() => move$.pipe (takeUntil (up$))));

    let subscription = paints$.subscribe (e => {
      setX (null);
      setY (null);
      paint (e);
    });

    //touch pad movements
    const setPositionTouch = e => {
      let touch = e.touches[0];
      pos.x = touch.clientX - canvas.offsetLeft;
      pos.y = touch.clientY - canvas.offsetTop;
      return [pos.x, pos.y];
    };

    const paintTouch = e => {
      ctx.beginPath ();
      if (x && y) {
        ctx.moveTo (x, y);
        ctx.lineTo (x, y);
      } else {
        ctx.moveTo (pos.x, pos.y);
        setPositionTouch (e);
        ctx.lineTo (pos.x, pos.y);
      }
      ctx.stroke ();
      ctx.closePath ();
    };

    const moveTouch$ = fromEvent (canvas, 'touchmove');
    const upTouch$ = fromEvent (canvas, 'touchend');
    const downTouch$ = fromEvent (canvas, 'touchstart').pipe (
      map (e => {
        const vals = setPositionTouch (e);
        setX (vals[0]);
        setY (vals[1]);
      })
    );

    const paintsTouch$ = downTouch$.pipe (
      mergeMap (() => moveTouch$.pipe (takeUntil (upTouch$)))
    );

    let subscriptionTouch = paintsTouch$.subscribe (e => {
      setX (null);
      setY (null);
      paintTouch (e);
    });

    if (reset) {
      ctx.clearRect (0, 0, canvas.width, canvas.height);
      subscription.unsubscribe ();
      subscription = paints$.subscribe (e => {
        setX (null);
        setY (null);
        paint (e);
      });

      subscriptionTouch.unsubscribe ();
      subscriptionTouch = paintsTouch$.subscribe (e => {
        setX (null);
        setY (null);
        paintTouch (e);
      });
    }
  };

  const onReset = () => {
    startPaint (true);
  };

  useEffect (() => {
    startPaint ();
    disableBodyScroll (document.querySelector ('my-canvas'));
  }, []);

  return (
    <div>
      <Header />
      <div className="container">
        <div style={divStyle}>
          <canvas id="my-canvas" style={canvasStyle} />
        </div>
        <div>
          <p>
            Select Your Marker
            {' '}
          </p>
          <div
            id="black-pen"
            className="whiteboard-color"
            style={{...whiteboardColor, ...blackPen}}
          />
          <div
            id="red-pen"
            className="whiteboard-color"
            style={{...whiteboardColor, ...redPen}}
          />
          <div
            id="blue-pen"
            className="whiteboard-color"
            style={{...whiteboardColor, ...bluePen}}
          />
          <div
            id="yellow-pen"
            className="whiteboard-color"
            style={{...whiteboardColor, ...yellowPen}}
          />
          <div
            id="green-pen"
            className="whiteboard-color"
            style={{...whiteboardColor, ...greenPen}}
          />
        </div>
        <button
          onClick={onReset}
          id="reset"
          className="btn red accent-1"
          style={btnStyle}
        >
          reset
        </button>
        <p>
          code for this whiteboard tool can be found <a href="#">here</a>
        </p>
      </div>
    </div>
  );
};

export default Whiteboard;