import { Steps as AntdSteps, StepsProps, ConfigProvider } from 'antd';
import React, {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useState,
} from 'react';
import './index.less';
import classNames from 'classnames';
import { AOP } from '../utils/AOP';
import StepItem from './components/StepItem';
import style from './index.less';

interface StepsExtraProps {
  type?: 'default' | 'navigation' | 'arrow';
}
const StepInfo = createContext<Omit<StepsProps, 'type'> & StepsExtraProps>({});
const StepIndex = createContext(0);

const Steps = (props: Omit<StepsProps, 'type'> & StepsExtraProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-steps');
  const { type = 'default' } = props;

  const [_current, setCurrent] = useState(props.current);
  const _onChange = new AOP<number, void>(props.onChange)
    .before(cur => {
      setCurrent(cur);
    })
    .getFunction();

  const StepsNode = {
    default: (
      <AntdSteps
        {...(props as StepsProps)}
        className={classNames(`${prefixCls}-box`, props.className)}
        onChange={_onChange}
      >
        {props.children}
      </AntdSteps>
    ),
    navigation: (
      <AntdSteps
        {...(props as StepsProps)}
        className={classNames(`${prefixCls}-box`, props.className)}
        onChange={_onChange}
      >
        {props.children}
      </AntdSteps>
    ),
    arrow: (
      <div className={classNames(`${prefixCls}-arrow-container`)}>
        {(props.children as any)?.map ? (
          (props.children as any).map((item, index) => {
            return (
              <StepIndex.Provider value={index} key={index}>
                {item}
              </StepIndex.Provider>
            );
          })
        ) : (
          <StepIndex.Provider value={0}>{props.children}</StepIndex.Provider>
        )}
      </div>
    ),
  };

  return (
    <StepInfo.Provider value={{ ...props, current: _current }}>
      {StepsNode[type]}
    </StepInfo.Provider>
  );
};

type StepProps = {
  description?: React.ReactNode;
  disabled?: boolean;
  icons?: React.ReactNode;
  status?: string;
  subTitle?: React.ReactNode;
  title?: React.ReactNode;
  className?: string;
};

const Step = (props: StepProps) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-step');
  const { type = 'default', ...res } = useContext(StepInfo);
  const stepIndex = useContext(StepIndex);

  const StepNodes = {
    default: (
      <AntdSteps.Step
        {...(props as any)}
        className={classNames(`${prefixCls}-box`, props.className)}
      ></AntdSteps.Step>
    ),
    navigation: (
      <AntdSteps.Step
        {...(props as any)}
        className={classNames(`${prefixCls}-box`, props.className)}
      ></AntdSteps.Step>
    ),
    arrow: (
      <StepItem {...(props as any)} {...res} stepIndex={stepIndex}></StepItem>
    ),
  };

  return StepNodes[type] || <></>;
};
Steps.Step = Step;

export { Steps };