import React, { useState, ReactElement } from 'react';
import { delay } from 'lodash';
import { style as s } from 'app/styles';

interface ComponentProps {
  children: ReactElement | ReactElement[];
  style: object;
  onOpen?: () => void;
  onClose?: () => void;
}

const openDelaySeconds = 0.25;
const closeDelaySeconds = 0.5;

const openPanelStyle = {
  _extends: ['flexColumn'],
  position: 'relative',
  flexShrink: 0,
  width: 300,
  transition: `all ${openDelaySeconds}s ease`,
};

const closedPanelStyle = {
  _extends: ['flexColumn'],
  position: 'relative',
  width: 20,
  transition: `all ${closeDelaySeconds}s ease`,
};

const toggleIconStyle = {
  position: 'absolute',
  right: '@margins.medium+px',
  top: '@margins.medium+px',
  cursor: 'pointer',
  zIndex: 1,
};

export const CollapsibleSidePanel: React.FC<ComponentProps> = ({
  children,
  style,
  onOpen,
  onClose,
}): React.ReactElement => {
  const [isOpen, setIsOpen] = useState(false);

  const panelStyle = isOpen ? openPanelStyle : closedPanelStyle;
  return (
    <div style={s(panelStyle, style)} onClick={didClickPanel}>
      <div style={s(toggleIconStyle)} onClick={didToggle}>
        |||
      </div>
      {isOpen && children}
    </div>
  );

  function didClickPanel() {
    !isOpen && didToggle();
  }

  function didToggle() {
    if (isOpen) {
      onClose && delay(() => onClose(), closeDelaySeconds * 1000);
    } else {
      onOpen && delay(() => onOpen(), openDelaySeconds * 1000);
    }
    setIsOpen(!isOpen);
  }
};