import { css } from 'glamor';
import { observer } from 'mobx-react';
import { CSSProperties } from 'react';
import { Portal } from '../common/Portal';
import { useApphouse } from '../../context/useApphouse';
import { ButtonStyles } from '../Button';
import { StyleOverwrites } from '../component.interfaces';
import React from 'react';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';

export interface TogglePopupButtonStyles {
  button?: ButtonStyles;
  popupWrapper?: CSSProperties;
}

export interface TogglePopupButtonProps
  extends StyleOverwrites<TogglePopupButtonStyles> {
  /**
   * Hint for the trigger button
   */
  hint?: string;
  /**
   * @default hintLeft
   */
  hintDirection?: CSSProperties;
  /**
   * Content to go inside the button that will trigger the popup
   * usually text or icon, note that this will be put inside a button
   * so don't pass in a button here
   */
  trigger: React.ReactNode;
  /**
   * Popup content
   */
  popup: React.ReactNode;
  /**
   * callback for when the toggle button gets click
   * @param isShowing boolean indicating if the popup is showing or not
   */
  onToggle: (isShowing: boolean) => void;
  /**
   * If true, the popup will be removed from the DOM when the user scrolls
   * 'TODO: implement this'
   * @default false
   */
  removeOnScroll?: boolean;
  /**
   * Force the popup to show and hide
   * /TODO
   * @default false
   * @optional
   */
  showPopup?: boolean;
}
export const ButtonTogglePopup: React.FC<TogglePopupButtonProps> = observer(
  ({ trigger, popup, styleOverwrites, onToggle }) => {
    const { theme } = useApphouse();

    const componentRef = React.useRef(null);

    const { colors } = theme;
    const componentStyles: TogglePopupButtonStyles = {
      popupWrapper: {
        backgroundColor: colors.primary,
        color: colors.onPrimary
      }
    };
    const localStyles = useLocalStyles(componentStyles, styleOverwrites);

    return (
      <Portal
        id="popup-portal"
        toggle={trigger}
        onToggle={onToggle}
        styleOverwrites={{ button: localStyles.button }}
      >
        <div ref={componentRef} {...css(localStyles.popupWrapper)}>
          {popup}
        </div>
      </Portal>
    );
  }
);