import Balloon from '../balloon/index';
import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { ItemProps as NextItemProps, StepProps as NextStepProps } from '@alifd/next/types/step';
import { Step as NextStep } from '@alifd/next';

interface StepAddProps {
  error?: boolean;
  info?:string;
}

interface StepProps extends Omit<NextStepProps, 'size'> {
  size?: 'small' | 'medium';
}

interface Istate {
  overflowShow: boolean;
}

interface ItemProps extends NextItemProps, StepAddProps {}


class StepItem extends Component<ItemProps, Istate> {

  render() {
    const { prefix = 'next-', error, icon, className, info } = this.props;

    if (info) {
      return (
        <Balloon
          trigger={<NextStep.Item
            {...this.props}
            className = {cls(
              className, {
                [`${prefix}step-error`]: error,
                [`${prefix}step-self-icon`]: icon,
              },
            )}
          />}
          align="bl"
          type="dark"
          alignEdge
        >{info}</Balloon>
      );
    }
    return (
      <NextStep.Item
        {...this.props}
        className = {cls(
          className, {
            [`${prefix}step-error`]: error,
            [`${prefix}step-self-icon`]: icon,
          },
        )}
      />
    );
  }
}

class Step extends Component<StepProps> {
  static Item = ConfigProvider.config(StepItem);

  render() {
    const { prefix = 'next-', className, size = 'medium', shape = 'circle', labelPlacement } = this.props;
    return (
      <NextStep
        {...this.props}
        shape = {shape}
        labelPlacement = { shape === 'circle' ? (labelPlacement === 'ver' ? 'ver' : 'hoz') : 'ver'}
        // dot模式下强制设置为 ver，circle模式下设置默认为hoz，自定义图标的一般设置为ver（设计稿，用户自己去设置），hoz情况下的样式也没有问题
        className = {cls(
          className, {
            [`${prefix}small`]: size === 'small',
            [`${prefix}medium`]: size === 'medium',
          },
        )}
      />
    );
  }
}

export default ConfigProvider.config(Step);