import React, { useEffect, useState } from 'react';
import ScapeMenu from '../screen-list/components/SpaceMenu';
import ScapeHeader from './components/header';
import ScapeTable from './components/table';
import SpaceModalTable from './components/modalTable';
import { useTitle } from 'components/easyUse';
import style from './index.less';
import { Button, Modal } from '@easyv/antd';
import { ConfigProvider, Input } from '@easyv/react-gui';
import { connect } from 'react-redux';
import { spaceItem, userListState } from 'models/space.types';
import { getSpaceUserList, getAllSpaceUserList, updateSpace } from 'models/space';
import EasyvButton from 'components/EasyvButton';
import EasyvNoData from 'components/EasyvNoData';
const { Search } = Input;
type IProps = {
  spaceActive: spaceItem;
  getSpaceUserList: () => void;
  getAllSpaceUserList: () => void;
  updateSpace: ({ addUsers }) => void;
  userList: userListState[];
  spaceAllUserList: userListState[];
  spaceId: number;
};

function AdminSpace({
  spaceActive,
  spaceAllUserList,
  getSpaceUserList,
  userList,
  spaceId,
  getAllSpaceUserList,
  updateSpace
}: IProps): React.ReactElement {
  useTitle('空间管理');
  const defaultSpace = !spaceActive?.type; //是否默认空间
  const [rowKeys, setRowKeys] = useState<number[]>([]);
  const [search, setSearch] = useState<string>('');

  const [isModalVisible, setModalVisible] = useState<boolean>(false);
  const addUser = () => {
    setModalVisible(true);
  };

  const selectUser = () => {
    updateSpace({
      addUsers: rowKeys
    });
    setModalVisible(false);
  };

  useEffect(() => {
    getAllSpaceUserList();
  }, []);

  useEffect(() => {
    if (spaceId) {
      getSpaceUserList();
    }
  }, [spaceId]);

  const onCancel = () => {
    setRowKeys([]);
    setSearch('');
    setModalVisible(false);
  };
  let dataTable = defaultSpace ? spaceAllUserList : userList;
  dataTable = dataTable.filter((d) => d.id !== 1);

  return (
    <div className={style.adminSpaceBox}>
      <div className={style.adminSpaceHeader}>
        <span>空间管理</span>
      </div>
      <div className={style.cotent}>
        <div className={style.bc}></div>
        <div className={style.layout}>
          <ScapeMenu />
        </div>

        <div className={style.scapeMain}>
          <ScapeHeader defaultSpace={defaultSpace} />

          <div className={style.header}>
            <p className={style.headerTitle}>成员管理</p>
            {!defaultSpace && (
              <Button type="primary" onClick={addUser}>
                添加成员
              </Button>
            )}
          </div>
          <div className={style.scapeTable}>
            {dataTable?.length ? (
              <ScapeTable dataTable={dataTable} defaultSpace={defaultSpace} />
            ) : (
              <EasyvNoData text="暂无成员" theme="black" />
            )}
          </div>
        </div>
        <Modal
          maskClosable={false}
          destroyOnClose={true}
          className={style.modalWrapper}
          title="添加成员"
          visible={isModalVisible}
          footer={null}
          onCancel={onCancel}>
          <div className={style.group}>
            <ConfigProvider>
              <Search
                className={style.search_input}
                onChange={(e) => {
                  setSearch(e.target.value);
                }}
                placeholder="请输入用户名/ID搜索"
              />
            </ConfigProvider>
            <p className={style.selectedText}>
              已选择<a>{rowKeys.length}</a>条数据
            </p>
            <div className={style.userTable}>
              <SpaceModalTable searchVal={search} setRowKeys={setRowKeys} />
            </div>
          </div>
          <div className={style.modalFooter}>
            {window.appConfig.LOCAL ? (
              <div />
            ) : (
              <p>
                没找到？去
                <a target="_back" href={window.appConfig.USER_CENTER_URL + '/user-manage'}>
                  添子帐号/协作者
                </a>
              </p>
            )}
            <EasyvButton disabled={!rowKeys.length} theme="default" onClick={selectUser}>
              添加
            </EasyvButton>
          </div>
        </Modal>
      </div>
    </div>
  );
}
function mapStateToProps({ space }) {
  const { current, active, userList = [], spaceAllUserList = [] } = space;

  return {
    spaceId: current,
    spaceActive: active,
    userList,
    spaceAllUserList
  };
}
export default connect(mapStateToProps, {
  getSpaceUserList,
  getAllSpaceUserList,
  updateSpace
})(AdminSpace);
