import { Divider, Space, Steps } from 'antd';
import { useMemo } from 'react';
import { useIntl } from 'umi';
import { v4 } from 'uuid';
import { formatUserRender } from '../utils';

const { Step } = Steps;

export interface DetailStepProps {
  list: API.User[][];
  newStep?: any[];
}

const DetailStep = (props: DetailStepProps) => {
  const { list, newStep } = props;

  const resultList = useMemo(() => {
    return list.map((item) => item.map((element) => ({ ...element, key: v4() })));
  }, [list]);

  const { formatMessage } = useIntl();

  const stepNodeTitle = (index: number) => {
    if (!newStep) return undefined;
    const step = newStep[index - 1];
    if (step?.nodeType === 2) {
      return formatMessage({ id: 'component.AduitPreview.steps.noticeNode' });
    }
    return undefined;
  };

  return (
    <>
      <Steps
        direction={list?.length > 3 ? 'vertical' : 'horizontal'}
        progressDot
        current={list?.length}
        size={'small'}
      >
        {resultList?.map((item, index) => (
          <Step
            key={item?.[0].key}
            title={
              index !== 0 && index !== resultList.length - 1 ? stepNodeTitle(index) : undefined
            }
            description={
              <Space
                size={0}
                wrap
                direction={list?.length > 3 ? 'horizontal' : 'vertical'}
                split={
                  list?.length > 3 ? <Divider type={'vertical'} style={{ margin: '0 5px' }} /> : ''
                }
              >
                {item?.map?.((val) => (
                  <span key={val.key}>
                    {val.id
                      ? formatUserRender({
                          id: val.id,
                          account: val?.nameEn,
                          nameZh: val.nameZh,
                          state: val.state,
                        })
                      : val.nameZh}
                  </span>
                ))}
              </Space>
            }
          />
        ))}
      </Steps>
    </>
  );
};

export default DetailStep;