import React, { useContext } from 'react';
import {
  Timeline as OldTimeline,
  ConfigProvider,
  TimelineProps,
  TimelineItemProps as AntdTimelineItemProps,
} from 'antd';
import classNames from 'classnames';

import './index.less';

const Prefix = 'btri-timeline';
declare interface BtriTimelineItemProps extends AntdTimelineItemProps {
  time?: string;
}
function Timeline(props: TimelineProps) {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls(Prefix);

  return (
    <OldTimeline
      {...props}
      className={classNames(`${prefixCls}`, props.className)}
    ></OldTimeline>
  );
}

Timeline.Item = (props: BtriTimelineItemProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls(Prefix);

  const { time } = props;
  return (
    <OldTimeline.Item {...props}>
      {props.children}
      {time && (
        <div
          className={classNames({
            [`${prefixCls}-time`]: time,
          })}
        >
          {time}
        </div>
      )}
    </OldTimeline.Item>
  );
};

export { Timeline };