import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { Icon } from "../icon";
import { Text } from "../text";
import { useConfig } from "../_util/config-context";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";
import { Bubble, BubbleProps } from "../bubble";

interface TransferCellProps extends StyledProps {
  /**
   * Cell 标题
   */
  title?: React.ReactNode;

  /**
   * Cell 内容区头部内容
   */
  header?: React.ReactNode;

  /**
   * Cell 底部提示
   */
  tip?: React.ReactNode;

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

  /**
   * Cell 内容区是否垂直可滚动
   *
   * 需要实现内容内部滚动时（如 Table），可禁用此选项
   *
   * @default true
   */
  scrollable?: boolean;
}

export const TransferCell = React.forwardRef(function TransferCell(
  {
    title,
    tip,
    header,
    children,
    scrollable = true,
    className,
    ...props
  }: TransferCellProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-transfer__cell`, className)}
      {...props}
    >
      {typeof title !== "undefined" && (
        <div className={`${classPrefix}-transfer__title`}>
          {typeof title === "string" ? <h4>{title}</h4> : title}
        </div>
      )}
      <div className={`${classPrefix}-transfer__content`}>
        {header}
        <div
          className={`${classPrefix}-transfer__inner`}
          style={{ overflowY: scrollable ? undefined : "hidden" }}
        >
          {children}
        </div>
      </div>
      <div className={`${classPrefix}-transfer__tips`}>
        {typeof tip === "string" ? <Text theme="weak">{tip}</Text> : tip}
      </div>
    </div>
  );
});

TransferCell.displayName = "TransferCell";

export interface TransferOperation extends StyledProps {
  /**
   * 点击回调
   */
  onClick?: (event: React.MouseEvent) => void;

  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean;

  /**
   * 是否为加载中状态
   * @default false
   */
  loading?: boolean;

  /**
   * 气泡提示内容
   */
  bubble?: React.ReactNode;
}

export interface TransferProps extends StyledProps {
  /**
   * 头部内容
   */
  header?: React.ReactNode;

  /**
   * 左侧 TransferCell
   * @docType React.ReactElement
   */
  leftCell: React.ReactElement;

  /**
   * 右侧 TransferCell
   * @docType React.ReactElement
   */
  rightCell: React.ReactElement;

  /**
   * 操作按钮配置
   * @default [false, false]
   * @since 2.7.0
   */
  operations?: [false | TransferOperation, false | TransferOperation];
}

function TransferButton({
  icon,
  className,
  disabled,
  loading,
  onClick,
  bubble,
  bubblePlacement,
  ...props
}: TransferOperation & {
  icon: string;
  bubblePlacement?: BubbleProps["placement"];
}) {
  const { classPrefix } = useConfig();

  return (
    <Bubble content={bubble} placement={bubblePlacement}>
      <a
        className={classNames(`${classPrefix}-pagination__turnbtn`, className, {
          "is-disabled": disabled,
        })}
        onClick={event => {
          if (!disabled && !loading) {
            onClick(event);
          }
        }}
        {...props}
      >
        <Icon type={loading ? "loading" : icon} />
      </a>
    </Bubble>
  );
}

TransferButton.displayName = "TransferButton";

export const Transfer = forwardRefWithStatics(
  function Transfer(
    {
      header,
      leftCell,
      rightCell,
      className,
      operations = [false, false],
      ...props
    }: TransferProps,
    ref: React.Ref<HTMLDivElement>
  ) {
    const { classPrefix } = useConfig();
    const [left, right] = operations;
    return (
      <div
        ref={ref}
        className={classNames(`${classPrefix}-transfer`, className)}
        {...props}
      >
        {header && (
          <div className={`${classPrefix}-transfer__header`}>{header}</div>
        )}
        <div className={`${classPrefix}-transfer__body`}>
          {leftCell}
          <div className={`${classPrefix}-transfer__separator`}>
            {!left && !right ? (
              <Icon type="transfer" />
            ) : (
              <div className={`${classPrefix}-pagination`}>
                {left && (
                  <TransferButton
                    {...left}
                    icon="arrowright"
                    bubblePlacement="top"
                  />
                )}
                {right && (
                  <TransferButton
                    {...right}
                    icon="arrowleft"
                    bubblePlacement="bottom"
                  />
                )}
              </div>
            )}
          </div>
          {rightCell}
        </div>
      </div>
    );
  },
  {
    Cell: TransferCell,
  }
);

Transfer.displayName = "Transfer";