import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { ItemProps as NextItemProps, TimelineProps as NextTimelineProps } from '@alifd/next/types/timeline';
import { Timeline as NextTimeline } from '@alifd/next';

interface TimelineAddProps {
  disabled?: boolean;
  contentLeft?: boolean | string;
}

interface TimelineProps extends NextTimelineProps { }

interface ItemProps extends NextItemProps, TimelineAddProps { }

class TimelineItem extends Component<ItemProps> {
  render() {
    const { prefix = 'next-', disabled, className, timeLeft, content, contentLeft, ...otherProps } = this.props;
    // const { prefix = 'next-', disabled, className, ...otherProps } = this.props;
    return (
      <NextTimeline.Item
        {...otherProps}
        prefix={prefix}
        {...otherProps}
        content={content ? content : contentLeft}
        timeLeft={timeLeft}
        className={cls(className, {
          [`${prefix}timeline-item-disabled`]: disabled,
          [`${prefix}timeline-item-content-onleft`]: (typeof contentLeft === 'string'),
          [`${prefix}timeline-item-onleft`]: (typeof contentLeft === 'boolean'),
        })}
      />
    );
  }
}

class Timeline extends Component<TimelineProps & ItemProps> {
  static Item = ConfigProvider.config(TimelineItem);
  render() {
    return (
      <NextTimeline
        {...this.props}
      />
    );
  }
}

export default ConfigProvider.config(Timeline);