/**
 * 二次加工工具弹窗统一管理
 */
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;
  extraProps: {[key: string]: any};
}
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>;
  getAllData: () => Promise<any>;
  crudTitle: string;
  columns: any[];
  data: {
    items: any[];//当前页数据
    selectedItems: any[];//选中数据
    itemRaws: any[]//前端分页时全部数据
  };
  staticRecords: (port: 141 | 142 | 143) => void;
  isStatic?: boolean;
  name: string;
  loadDataOnce?: boolean;
  handleChangeData: (itemKey: string, schema: any) => void;
}
const ProcessToolsModal = (props: IProps) => {
  const { currentKey, modalGroup, onChange, onDelete, container, render, translate: __, data, staticRecords,
    columns, getAllData, name, isStatic, loadDataOnce, handleChangeData, crudTitle } = 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 hide={!(currentKey === item.key)} render={render} container={container}
              title={title} translate={__} onHide={() => onChange('')} data={data} getAllData={getAllData}
              onCloseModal={() => onDelete(item.key)} staticRecords={staticRecords} columns={columns}
              schema={item.schema} extraProps={item.extraProps} name={name} isStatic={isStatic} loadDataOnce={loadDataOnce}
              handleChangeData={(newSchema) => handleChangeData(item.key, newSchema)} toolType={item.toolType}
              crudTitle={crudTitle}
            />
          </div>
        })}
      </div>
    </div>
  </>
  )
}
export default ProcessToolsModal;