import ConfigProvider from '../config-provider';
import Dropdown from '../dropdown';
import React, { Component, ReactNode } from 'react';
import cls from 'classnames';
import { Icon } from '../index';
import { Breadcrumb as NextBreadcrumb } from '@alifd/next';
import { ItemProps as NextBreadcrumbItemProps } from '@alifd/next/types/breadcrumb';
import { BreadcrumbProps as NextBreadcrumbProps } from '@alifd/next/types/breadcrumb';

interface BreadcrumbItemProps extends NextBreadcrumbItemProps {
  overlay?: ReactNode;
  separator?: ReactNode;
  rtl?: boolean;
  activated?: boolean;
}

class BreadcrumbItem extends Component<BreadcrumbItemProps> {
  static Separator({ prefix, children }) {
    return <span className={`${prefix}breadcrumb-separator`}>{children}</span>;
  }

  render() {
    const { overlay } = this.props;
    const {
      prefix = 'next-',
      className,
      rtl,
      children,
      activated,
      separator,
      ...otherProps
    } = this.props;

    // overlay 模式
    if (overlay) {
      const clazz = cls(
        `${prefix}breadcrumb-text ${prefix}breadcrumb-text-overlay`,
        className,
        {
          activated,
        },
      );
      const childDom = children => {
        return (
          <span className={`${prefix}breadcrumb-overlay`}>
            {children}
            <Icon size='small' type="Caretdown-filled" />
          </span>
        );
      };
      return (
        <li dir={rtl ? 'rtl' : null} className={`${prefix}breadcrumb-item`}>
          <span className={clazz} {...otherProps}>
            <Dropdown className={`${prefix}breadcrumb-dropdown-wrapper`} trigger={childDom(children)} triggerType={[ 'hover' ]}>
              {overlay}
            </Dropdown>
          </span>
          {activated
            ? null
            : BreadcrumbItem.Separator({ prefix, children: separator })}
        </li>
      );
    }
    return (
      <NextBreadcrumb.Item
        {...this.props}
        prefix={prefix}
        className={cls(className, {})}
      />
    );
  }
}

class Breadcrumb extends Component<NextBreadcrumbProps> {
  static Item = ConfigProvider.config(BreadcrumbItem);
  render() {
    return <NextBreadcrumb {...this.props} />;
  }
}
export default ConfigProvider.config(Breadcrumb);