/**
 * 二次加工工具弹窗统一管理
 */
import { CloseOutlined } from "@ant-design/icons";
import React from "react";
import { TranslateFn } from "../../../locale";
import { SchemaNode } from "../../../types";
import ProcessToolsTabs from "./ProcessDataTabs";
type ModalItem = {
  key: string;
  label: string;
  schema: any;
  toolType: string;//二次加工工具类型
  subTitle?: string;
}
interface IProps {
  modalGroup: Array<ModalItem>;
  currentKey: string;
  onChange: (currentKey: string) => void;
  onDelete: (currentKey: string) => void;
  container: HTMLElement | null;
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
  translate: TranslateFn<any>;
}
const ProcessToolsModal = (props: IProps) => {
  const { currentKey, modalGroup, onChange, onDelete, container, render, translate: __ } = props;
  return (<>
    <div className="process-tools-container">
      <div className="process-tools-group">
        {modalGroup.map(item => {
          const arr = modalGroup.filter(info => info.toolType === item.toolType);
          const modalIndex = arr.findIndex(arrItem => arrItem.key === item.key);
          const title = item.label + `${arr.length > 1 ? ('-' + (modalIndex + 1)) : ''}` + `${item.subTitle ? ('-' + item.subTitle) : ''}`
          return <div key={item.key} className={`process-tools-item ${currentKey === item.key ? 'active-tools-item' : ''}`}>
            <div className="tools-item-title" onClick={() => onChange(item.key)}>{title}</div>
            <CloseOutlined onClick={() => onDelete(item.key)} className="tools-item-icon" />
            <ProcessToolsTabs key={item.key} hide={!(currentKey === item.key)} render={render} container={container}
              title={title} translate={__} onHide={() => onChange('')}
              onCloseModal={() => onDelete(item.key)}
              schema={item.schema}
            />
          </div>
        })}
      </div>
    </div>
  </>
  )
}
export default ProcessToolsModal;