import React from 'react';
import {
  CallDetailsType,
  HangUpType,
  SetLocalPreviewType,
  SetRendererCanvasType,
} from '../state/ducks/calling';
import { Avatar } from './Avatar';
import { LocalizerType } from '../types/Util';

function renderAvatar(
  callDetails: CallDetailsType,
  i18n: LocalizerType
): JSX.Element {
  const {
    avatarPath,
    color,
    name,
    phoneNumber,
    profileName,
    title,
  } = callDetails;

  const backgroundStyle = avatarPath
    ? {
        backgroundImage: `url("${avatarPath}")`,
      }
    : {
        backgroundColor: color,
      };

  return (
    <div className="module-calling-pip__video--remote">
      <div
        className="module-calling-pip__video--background"
        style={backgroundStyle}
      />
      <div className="module-calling-pip__video--blur" />
      <div className="module-calling-pip__video--avatar">
        <Avatar
          avatarPath={avatarPath}
          color={color || 'ultramarine'}
          noteToSelf={false}
          conversationType="direct"
          i18n={i18n}
          name={name}
          phoneNumber={phoneNumber}
          profileName={profileName}
          title={title}
          size={52}
        />
      </div>
    </div>
  );
}

export type PropsType = {
  callDetails: CallDetailsType;
  hangUp: (_: HangUpType) => void;
  hasLocalVideo: boolean;
  hasRemoteVideo: boolean;
  i18n: LocalizerType;
  setLocalPreview: (_: SetLocalPreviewType) => void;
  setRendererCanvas: (_: SetRendererCanvasType) => void;
  togglePip: () => void;
};

const PIP_HEIGHT = 156;
const PIP_WIDTH = 120;
const PIP_DEFAULT_Y = 56;
const PIP_PADDING = 8;

export const CallingPip = ({
  callDetails,
  hangUp,
  hasLocalVideo,
  hasRemoteVideo,
  i18n,
  setLocalPreview,
  setRendererCanvas,
  togglePip,
}: PropsType): JSX.Element | null => {
  const videoContainerRef = React.useRef(null);
  const localVideoRef = React.useRef(null);
  const remoteVideoRef = React.useRef(null);

  const [dragState, setDragState] = React.useState({
    offsetX: 0,
    offsetY: 0,
    isDragging: false,
  });

  const [dragContainerStyle, setDragContainerStyle] = React.useState({
    translateX: window.innerWidth - PIP_WIDTH - PIP_PADDING,
    translateY: PIP_DEFAULT_Y,
  });

  React.useEffect(() => {
    setLocalPreview({ element: localVideoRef });
    setRendererCanvas({ element: remoteVideoRef });
  }, [setLocalPreview, setRendererCanvas]);

  const handleMouseMove = React.useCallback(
    (ev: MouseEvent) => {
      if (dragState.isDragging) {
        setDragContainerStyle({
          translateX: ev.clientX - dragState.offsetX,
          translateY: ev.clientY - dragState.offsetY,
        });
      }
    },
    [dragState]
  );

  const handleMouseUp = React.useCallback(() => {
    if (dragState.isDragging) {
      const { translateX, translateY } = dragContainerStyle;
      const { innerHeight, innerWidth } = window;

      const proximityRatio: Record<string, number> = {
        top: translateY / innerHeight,
        right: (innerWidth - translateX) / innerWidth,
        bottom: (innerHeight - translateY) / innerHeight,
        left: translateX / innerWidth,
      };

      const snapTo = Object.keys(proximityRatio).reduce(
        (minKey: string, key: string): string => {
          return proximityRatio[key] < proximityRatio[minKey] ? key : minKey;
        }
      );

      setDragState({
        ...dragState,
        isDragging: false,
      });

      let nextX = Math.max(
        PIP_PADDING,
        Math.min(translateX, innerWidth - PIP_WIDTH - PIP_PADDING)
      );
      let nextY = Math.max(
        PIP_DEFAULT_Y,
        Math.min(translateY, innerHeight - PIP_HEIGHT - PIP_PADDING)
      );

      if (snapTo === 'top') {
        nextY = PIP_DEFAULT_Y;
      }
      if (snapTo === 'right') {
        nextX = innerWidth - PIP_WIDTH - PIP_PADDING;
      }
      if (snapTo === 'bottom') {
        nextY = innerHeight - PIP_HEIGHT - PIP_PADDING;
      }
      if (snapTo === 'left') {
        nextX = PIP_PADDING;
      }

      setDragContainerStyle({
        translateX: nextX,
        translateY: nextY,
      });
    }
  }, [dragState, dragContainerStyle]);

  React.useEffect(() => {
    if (dragState.isDragging) {
      document.addEventListener('mousemove', handleMouseMove, false);
      document.addEventListener('mouseup', handleMouseUp, false);
    } else {
      document.removeEventListener('mouseup', handleMouseUp, false);
      document.removeEventListener('mousemove', handleMouseMove, false);
    }

    return () => {
      document.removeEventListener('mouseup', handleMouseUp, false);
      document.removeEventListener('mousemove', handleMouseMove, false);
    };
  }, [dragState, handleMouseMove, handleMouseUp]);

  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    <div
      className="module-calling-pip"
      onMouseDown={ev => {
        const node = videoContainerRef.current;
        if (!node) {
          return;
        }
        const rect = (node as HTMLElement).getBoundingClientRect();
        const offsetX = ev.clientX - rect.left;
        const offsetY = ev.clientY - rect.top;

        setDragState({
          isDragging: true,
          offsetX,
          offsetY,
        });
      }}
      ref={videoContainerRef}
      style={{
        cursor: dragState.isDragging ? '-webkit-grabbing' : '-webkit-grab',
        transform: `translate3d(${dragContainerStyle.translateX}px,${dragContainerStyle.translateY}px, 0)`,
        transition: dragState.isDragging ? 'none' : 'transform ease-out 300ms',
      }}
    >
      {hasRemoteVideo ? (
        <canvas
          className="module-calling-pip__video--remote"
          ref={remoteVideoRef}
        />
      ) : (
        renderAvatar(callDetails, i18n)
      )}
      {hasLocalVideo ? (
        <video
          className="module-calling-pip__video--local"
          ref={localVideoRef}
          autoPlay
        />
      ) : null}
      <div className="module-calling-pip__actions">
        <button
          type="button"
          aria-label={i18n('calling__hangup')}
          className="module-calling-pip__button--hangup"
          onClick={() => {
            hangUp({ callId: callDetails.callId });
          }}
        />
        <button
          type="button"
          aria-label={i18n('calling__pip')}
          className="module-calling-pip__button--pip"
          onClick={togglePip}
        />
      </div>
    </div>
  );
};