/**
 * TEAM: frontend_infra
 * @flow strict
 */

/* eslint-disable flexport/no-unused-aphrodite-styles */

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
// TODO: Fix this eslint issue on next edit. This is an autogenerated comment.
// eslint-disable-next-line flexport/no-legacy-dependencies
import {zIndices} from "latitude/tools/deprecatedZIndices";
import {type Size} from "../sizes";
import PopupWithClickAway, {
  ActualPlacementContext,
  type PopperPlacement,
} from "../popup/PopupWithClickAway";
import FilterButton from "./FilterButton";
import colors from "../colors";
import StackingContext from "../StackingContext";

type Props = {|
  ...React.ElementConfig<typeof FilterButton>,
  +isActive?: void,
  +onClick?: () => void,
  /** the size of the filter button */
  +size?: Size,
  /** controls where the dropdown menu is anchored in relation to the multiselect input */
  +placement?: PopupPlacement,
  /** The dropdown contents */
  +children: React.Node | ((closePopup: () => void) => React.Node),
  /** whether to use a Portal or React Fragment component */
  +noPortal?: boolean,
  /** Prevents the popper from changing placement when overflowing: https://popper.js.org/docs/v2/modifiers/flip/ */
  +fixedPopperPlacement?: boolean,
  /** $Hide Passes a data-qa-id attribute to the FilterButton for testing */
  +dataQaId?: string,
  +onClose?: () => void,
|};

export {ActualPlacementContext};

export type PopupPlacement = PopperPlacement;

/** This context tells child components that it is within a Filter */
export const InFilterContext: React.Context<boolean> =
  React.createContext<boolean>(false);

/**
 * @short A presentational skeleton for filters that can be used to build Custom Filters
 * @brandStatus V2
 * @status Stable
 * @category Filter
 * BaseFilter serves as a skeleton than can be extended to create custom
 * filters with. BaseFilter controls the presentation of the filter button
 * and the filter dropdown. If you build a custom filter, consider contributing your
 * filter to Latitude so it can be used by others. See
 * [Latitude contribution guidelines for more details](/components/contributing)
 */
function BaseFilter({
  children,
  selectedText,
  dataQaId,
  placement = "bottom-start",
  noPortal = false,
  fixedPopperPlacement = false,
  onClose,
  onClick,
  ...filterButtonProps
}: Props): React.Node {
  const {isDeprecatedZIndexEnabled} = React.useContext(StackingContext);

  return (
    <PopupWithClickAway escToClose={true} onClose={onClose}>
      {(Target, Popup, {togglePopup, closePopup, isOpen}) => (
        <>
          <Target>
            <FilterButton
              {...filterButtonProps}
              onClick={() => {
                togglePopup();
                onClick?.();
              }}
              isActive={isOpen}
              selectedText={selectedText}
              dataQaId={dataQaId}
            />
          </Target>
          <Popup
            placement={placement}
            noPortal={noPortal}
            zIndex={
              isDeprecatedZIndexEnabled
                ? zIndices.zIndex1500AboveModal.zIndex
                : null
            }
            fixedPopperPlacement={fixedPopperPlacement}
          >
            <div className={css(styles.dropdownContainer)}>
              <InFilterContext.Provider value={true}>
                {typeof children === "function"
                  ? children(closePopup)
                  : children}
              </InFilterContext.Provider>
            </div>
          </Popup>
        </>
      )}
    </PopupWithClickAway>
  );
}

const styles = StyleSheet.create({
  dropdownContainer: {
    display: "flex",
    margin: "6px 0",
    boxShadow: "0px 0px 10px rgba(57, 65, 77, 0.15)",
    background: colors.white,
  },
});

export default BaseFilter;