import React, { useContext } from "react";
import classNames from "classnames";
import { CollapseContext } from "./CollapseContext";
import { Icon } from "../icon";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
import { injectValue } from "../_util/inject-value";
import { KeyMap } from "../_util/key-map";

export interface CollapsePanelProps extends StyledProps {
  /**
   * 面板唯一标识
   */
  id: string;

  /**
   * 头部标题
   * @docType React.ReactNode | ((active: boolean) => React.ReactNode)
   */
  title?: React.ReactNode | ((active: boolean) => React.ReactNode);

  /**
   * 内容
   */
  children?: React.ReactNode;

  /**
   * **\[Deprecated\]** 请使用 `children` 代替
   * @deprecated
   */
  content?: React.ReactNode;

  /**
   * 展开方向
   * @default "bottom"
   * @since 2.1.0
   */
  position?: "top" | "bottom";
}

export const CollapsePanel = React.forwardRef(function CollapsePanel(
  {
    id,
    title,
    children,
    content = children,
    position,
    className,
    ...props
  }: CollapsePanelProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const {
    activeIds,
    onActive,
    icon = active => <Icon type={active ? "arrowup" : "arrowright"} />,
    iconPosition = "left",
    destroyInactivePanel,
  } = useContext(CollapseContext);
  const active = activeIds.includes(id);
  const show = active || !destroyInactivePanel;
  const top = position === "top";

  function handleClick(event: React.MouseEvent) {
    if (active) {
      onActive(
        activeIds.filter(activeId => activeId !== id),
        { event, activeId: id, active: !active }
      );
    } else {
      onActive([...activeIds, id], { event, activeId: id, active: !active });
    }
  }

  function handleKeyDown(event: React.KeyboardEvent) {
    if (event.key === KeyMap.Enter) {
      if (active) {
        onActive(
          activeIds.filter(activeId => activeId !== id),
          { event, activeId: id, active: !active }
        );
      } else {
        onActive([...activeIds, id], { event, activeId: id, active: !active });
      }
    }
  }

  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-accordion`, className, {
        "is-active": active,
      })}
      {...props}
    >
      {top && show && (
        <div className={`${classPrefix}-accordion__body`}>{content}</div>
      )}
      <div
        className={`${classPrefix}-accordion__header`}
        tabIndex={0}
        role="button"
        onClick={handleClick}
        onKeyDown={handleKeyDown}
      >
        {iconPosition !== "right" && injectValue(icon)(active)}
        <span className={`${classPrefix}-accordion__header-title`}>
          {injectValue(title)(active)}
        </span>
        {iconPosition === "right" && injectValue(icon)(active)}
      </div>
      {!top && show && (
        <div className={`${classPrefix}-accordion__body`}>{content}</div>
      )}
    </div>
  );
});

CollapsePanel.displayName = "CollapsePanel";