import React, { useContext } from "react";
import { isChildOfType } from "../_util/is-child-of-type";
import { useConfig } from "../_util/config-context";
import { RegionOption, RegionOptionContext } from "./RegionOption";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";

export interface RegionPanelHeadProps {
  /**
   * 地域面板头部，可以用于包含所有地域的选项
   */
  children: React.ReactNode;
}
const RegionPanelHead = React.forwardRef(function RegionPanelHead(
  { children, ...props }: RegionPanelHeadProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  if (isChildOfType(children, RegionOption)) {
    return (
      <div ref={ref} className={`${classPrefix}-region__title`} {...props}>
        {children}
      </div>
    );
  }
  return (
    <div ref={ref} className={`${classPrefix}-region__title`} {...props}>
      <div className={`${classPrefix}-region__title-name`}>{children}</div>
    </div>
  );
});

RegionPanelHead.displayName = "RegionPanelHead";

export interface RegionPanelColumnProps {
  /**
   * 包含地域分组 `RegionPanel.Group`
   */
  children: React.ReactNode;
}
const RegionPanelColumn = React.forwardRef(function RegionPanelColumn(
  { children, ...props }: RegionPanelColumnProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div ref={ref} className={`${classPrefix}-region__col`} {...props}>
      {children}
    </div>
  );
});

RegionPanelColumn.displayName = "RegionPanelColumn";

export interface RegionPanelGroupProps {
  /**
   * 地域分组名称，如果 "中国"
   */
  name?: string;

  /**
   * 地域分组，应该包含一个或多个地域选项 `RegionOption`
   */
  children?: React.ReactNode;
}
const RegionPanelGroup = React.forwardRef(function RegionPanelGroup(
  { name, children, ...props }: RegionPanelGroupProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div ref={ref} className={`${classPrefix}-region__unit`} {...props}>
      {name && <div className={`${classPrefix}-region__type`}>{name}</div>}
      {children}
    </div>
  );
});

RegionPanelGroup.displayName = "RegionPanelGroup";

export interface RegionPanelProps {
  /**
   * 地域选择面板的内容
   *
   * 可以包含 `RegionPanel.Head` 及 `RegionPanel.Column`
   */
  children?: React.ReactNode;
}

/**
 * 地域选择布局面板
 */
export const RegionPanel = forwardRefWithStatics(
  function RegionPanel(
    { children, ...props }: RegionPanelProps,
    ref: React.Ref<HTMLDivElement>
  ) {
    const { classPrefix } = useConfig();

    const { shortcut } = useContext(RegionOptionContext);

    let allOptionElement = null;
    const otherChildElements = [];

    React.Children.forEach(children, child => {
      if (isChildOfType(child, RegionPanelHead)) {
        allOptionElement = child;
      } else {
        otherChildElements.push(child);
      }
    });

    return (
      <div ref={ref} className={`${classPrefix}-region`} {...props}>
        {shortcut?.title && shortcut?.options?.length > 0 && (
          <div className={`${classPrefix}-region__history`}>
            <RegionPanelHead>{shortcut.title}</RegionPanelHead>
            <div className={`${classPrefix}-region__list`}>
              {shortcut.options.map(option => (
                <RegionOption key={option.value} {...option}></RegionOption>
              ))}
            </div>
          </div>
        )}
        {allOptionElement}
        <div className={`${classPrefix}-region__list`}>
          {otherChildElements}
        </div>
      </div>
    );
  },
  {
    Head: RegionPanelHead,
    Column: RegionPanelColumn,
    Group: RegionPanelGroup,
  }
);

RegionPanel.displayName = "RegionPanel";