import React from "react";
import classNames from "classnames";
import { CollapsePanel } from "./CollapsePanel";
import { CollapseContext, CollapseContextValue } from "./CollapseContext";
import { useDefault } from "../_util/use-default";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";

export interface CollapseProps extends StyledProps {
  /**
   * 是否为手风琴模式
   * @default false
   * @since 2.6.10
   */
  accordion?: boolean;

  /**
   * 当前激活的面板 ID 组
   */
  activeIds?: CollapseContextValue["activeIds"];

  /**
   * 默认激活的面板 ID 组
   */
  defaultActiveIds?: CollapseContextValue["activeIds"];

  /**
   * 面板激活变化回调
   */
  onActive?: CollapseContextValue["onActive"];

  /**
   * 切换图标
   * @docType React.ReactNode | ((active: boolean) => React.ReactNode)
   */
  icon?: CollapseContextValue["icon"];

  /**
   * 图标位置
   * @default "left"
   */
  iconPosition?: CollapseContextValue["iconPosition"];

  /**
   * 面板 <Collapse.Panel />
   */
  children?: React.ReactNode;

  /**
   * 是否销毁未激活的 Panel
   * @default false
   * @since 2.7.0
   */
  destroyInactivePanel?: boolean;
}

export const Collapse = forwardRefWithStatics(
  function Collapse(
    {
      accordion,
      activeIds,
      defaultActiveIds = [],
      onActive,
      icon,
      iconPosition = "left",
      destroyInactivePanel,
      children,
      className,
      ...props
    }: CollapseProps,
    ref: React.Ref<HTMLDivElement>
  ) {
    const { classPrefix } = useConfig();
    const [value, onChange] = useDefault(activeIds, defaultActiveIds, onActive);

    const handleChange: CollapseContextValue["onActive"] = (
      activeIds,
      { event, activeId, active }
    ) => {
      if (!accordion) {
        onChange(activeIds, { event, activeId, active });
      } else {
        onChange(active ? [activeId] : [], { event, activeId, active });
      }
    };

    return (
      <div
        ref={ref}
        className={classNames(`${classPrefix}-accordion-group`, className)}
        {...props}
      >
        <CollapseContext.Provider
          value={{
            activeIds: value,
            onActive: handleChange,
            icon,
            iconPosition,
            destroyInactivePanel,
          }}
        >
          {children}
        </CollapseContext.Provider>
      </div>
    );
  },
  {
    Panel: CollapsePanel,
  }
);

Collapse.displayName = "Collapse";