import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { Modal, Tag } from 'antd';
import OrgCore from './core';

type OrgSelectorDialogProps = {
  title?: string;
  visible: boolean;
  onCancel: () => void;
  data?: [];
  max?: number;
  multiple?: boolean; //默认不是多选
  request: any;
  checkStrictly?: boolean;
  selectedData?: { id: string; name: string }[]; //已选组织数据
  onOk: (selectedKeys: string[], selectedData: any[]) => void;
  modalClassName?: string | undefined; // 弹框类名自定义 用于自定义以及覆盖样式
};

const OrgSelectorDialog: React.FC<OrgSelectorDialogProps> = (props) => {
  const [selectedData, setSelectedData] = useState<any[]>(props?.selectedData || []);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const orgCoreRef = useRef<{
    remove: (index: number) => void;
    emptySelect: () => void;
    setSelected: (selectedKeys: string[], selectedData: any[]) => void;
  }>();

  useEffect(() => {
    if (props.visible) {
      orgCoreRef.current?.emptySelect();
      const keys = props?.selectedData?.map((data) => data.id) || [];
      const data = props?.selectedData || [];
      setSelectedKeys(keys);
      setSelectedData(data);
      orgCoreRef.current?.setSelected(keys, data);
    }
  }, [props.visible]);

  useEffect(() => {
    //console.log(selectedData);
  }, [selectedData]);

  const handleOk = () => {
    props.onOk(selectedKeys, selectedData);
  };
  const handleCancel = () => {
    props.onCancel();
  };

  const handleSelectOrg = (keys: string[], select: any[]) => {
    setSelectedKeys(keys);
    setSelectedData(select);
  };
  return (
    <Modal
      title={props.title || '选择部门'}
      width={560}
      visible={props.visible}
      className={'qx-org-selector__dialog'}
      onOk={handleOk}
      onCancel={handleCancel}
      wrapClassName={props?.modalClassName || ''}
    >
      <div className={'qx-org-selected__temp'}>
        {selectedData &&
          selectedData.map(
            (item: { key?: string; title?: string; code?: string; name?: string }) => (
              <Tag closable color={'blue'} key={item.key || item.code}>
                {item.title || item.name}
              </Tag>
            ),
          )}
      </div>
      <div className={'qx-org-selector__content'}>
        {props.visible ? (
          <OrgCore
            request={props.request}
            cRef={orgCoreRef}
            multiple
            max={props.max}
            checkStrictly={props.checkStrictly}
            params={props?.data || []}
            onSelect={handleSelectOrg}
          />
        ) : null}
      </div>
    </Modal>
  );
};

export default OrgSelectorDialog;