import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/web.timers.js";
import { Rnd } from 'react-rnd';
import { useEffect, useRef, useState } from 'react';
import { TransferPosition } from './transfer-position-icon';
import { ShareActionNav } from './share-action-nav';
import { ShareStateNav } from './share-state-nav';
import './index.css';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var RoomScreenShareStateBar = function RoomScreenShareStateBar() {
  var NAV_HEIGHT = 84;
  var HIDDEN_TIMEOUT = 3000;
  var MAX_Y = window.innerHeight - NAV_HEIGHT;
  var _useState = useState(TransferPosition.TOP),
    _useState2 = _slicedToArray(_useState, 2),
    navCurrentPosition = _useState2[0],
    setNavCurrentPosition = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    currentCoordinateX = _useState4[0],
    setCurrentCoordinateX = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    currentCoordinateY = _useState6[0],
    setCurrentCoordinateY = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    showTransferAnimation = _useState8[0],
    setShowTransferAnimation = _useState8[1];
  var _useState9 = useState(false),
    _useState0 = _slicedToArray(_useState9, 2),
    hiddenShareActionNav = _useState0[0],
    setHiddenShareActionNav = _useState0[1];
  var rndRef = useRef(null);
  var hideTimeout = useRef(0);
  var handlerShareNavTransferPosition = function handlerShareNavTransferPosition(targetPosition) {
    setShowTransferAnimation(true);
    setNavCurrentPosition(targetPosition);
    setCurrentCoordinateY(targetPosition === TransferPosition.TOP ? 0 : MAX_Y);
  };
  var handleDragStop = function handleDragStop(_, data) {
    setShowTransferAnimation(false);
    setCurrentCoordinateX(data.x);
    setCurrentCoordinateY(data.y);
    if (data.y === MAX_Y || data.y > MAX_Y) {
      setNavCurrentPosition(TransferPosition.BOTTOM);
    } else if (data.y === 0 || data.y < 0) {
      setNavCurrentPosition(TransferPosition.TOP);
    }
  };
  var handleMouseEnter = function handleMouseEnter() {
    console.log('handleMouseEnter');
    clearTimeout(hideTimeout.current);
    setHiddenShareActionNav(false);
  };
  var handleMouseLeave = function handleMouseLeave() {
    hideTimeout.current = window.setTimeout(function () {
      setHiddenShareActionNav(true);
    }, HIDDEN_TIMEOUT);
  };
  useEffect(function () {
    if (rndRef.current) {
      var width = rndRef.current.offsetWidth;
      var x = window.innerWidth / 2 - width / 2;
      setCurrentCoordinateX(x);
    }
  }, [rndRef]);
  console.log('useEffect', currentCoordinateX, currentCoordinateY, 'innerHeight', window.innerHeight, 'MAX_Y', MAX_Y);
  useEffect(function () {
    handleMouseLeave();
    return function () {
      clearTimeout(hideTimeout.current);
    };
  }, []);
  return /*#__PURE__*/_jsx(Rnd, {
    style: {
      transition: showTransferAnimation ? '0.2s' : '0s'
    },
    bounds: "window",
    allowAnyClick: false,
    cancel: ".share-action-nav__not-draggable",
    dragHandleClassName: "share-action-nav__can-draggable",
    enableUserSelectHack: true,
    enableResizing: false,
    "default": {
      x: currentCoordinateX,
      y: currentCoordinateY,
      width: 'auto',
      height: NAV_HEIGHT
    },
    onDragStop: handleDragStop,
    position: {
      x: currentCoordinateX,
      y: currentCoordinateY
    },
    children: /*#__PURE__*/_jsxs("div", {
      ref: rndRef,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      className: "fcr-flex  ".concat(navCurrentPosition === TransferPosition.BOTTOM ? 'share-action-nav__move_to_bottom' : 'share-action-nav__move_to_top', "\n    ").concat(hiddenShareActionNav && currentCoordinateY === MAX_Y && 'completely-hidden-in-bottom', "\n    ").concat(hiddenShareActionNav && currentCoordinateY === 0 && 'completely-hidden-in-top', "\n    "),
      children: [/*#__PURE__*/_jsx(ShareActionNav, {
        className: "".concat(hiddenShareActionNav ? 'invisible' : '')
      }), /*#__PURE__*/_jsx(ShareStateNav, {
        onShareStateNavTransferPosition: handlerShareNavTransferPosition,
        currentPosition: navCurrentPosition
      })]
    })
  });
};