import * as React from 'react';
import { useRef, useState } from 'react';
import { Modal, Tag } from 'antd';
import './style.less';
import type { RoleModel } from './core';
import RoleSelCore from './core';
// import { RequestMethod } from 'umi-request';

type RoleSelectorDialogProps = {
  appId?: string;
  title?: string;
  visible: boolean;
  onCancel: () => void;
  data?: [];
  multiple?: boolean;
  onOk: (selectedKeys: string[], selectedData: RoleModel[]) => void;
  request: AnalyserOptions;
  isRole?: boolean; // 是否为设计时角色权限
  appCode?: string;
};

const RoleSelectorDialog: React.FC<RoleSelectorDialogProps> = (props) => {
  const [selectedData, setSelectedData] = useState<RoleModel[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const coreRef = useRef({
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    remove: (index: number) => {
      // console.log(index)
    },
    emptySelect: () => {},
  });

  const handleOk = () => {
    props.onOk(selectedKeys, selectedData);
    coreRef.current.emptySelect();
    setSelectedKeys([]);
    setSelectedData([]);
  };
  const handleCancel = () => {
    props.onCancel();
    coreRef.current.emptySelect();
    setSelectedKeys([]);
    setSelectedData([]);
  };

  const handleSelectPos = (keys: string[], datas: RoleModel[]) => {
    setSelectedKeys(keys);
    setSelectedData(datas);
  };

  const handleRemove = (index: number) => {
    coreRef.current.remove(index);
  };

  return (
    <Modal
      title={props.title || '选择角色'}
      width={560}
      visible={props.visible}
      className={'qx-role-selector__dialog'}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      {props.multiple ? (
        <div className={'qx-role-selected__temp'}>
          {(selectedData || []).map((item: RoleModel, index: number) => (
            <Tag closable color={'blue'} key={item.id} onClose={() => handleRemove(index)}>
              {item.name}
            </Tag>
          ))}
        </div>
      ) : null}
      <div className={'qx-role-selector__content'}>
        {props.visible ? (
          <RoleSelCore
            request={props.request}
            cRef={coreRef}
            // multiple
            multiple={!props?.isRole}
            onSelect={handleSelectPos}
            appId={props.appId}
            isRole={props?.isRole}
            appCode={props?.appCode}
          />
        ) : null}
      </div>
    </Modal>
  );
};

export default RoleSelectorDialog;