import React, { Component } from 'react';
import { connect } from 'react-redux';
import Title from '../../components/Title';
import UserListHeader from './components/UserListHeader';
import UserListTable from './components/UserListTable';
import UserCreateModal from './components/UserCreateModal';
import { withRouter } from 'react-router-dom';
import TransferScroll from 'containers/TransferScroll';
import { getUserInfo, getUsers, changeUsersPage, resetUsers, createUser, deleteUser, resetPassword, searchUsers } from 'models/user';

interface IProps {
  getUserInfo: Function;
  getUsers: Function;
  resetUsers: Function;
  createUser: Function;
  onSearch: Function;
  onPageChange: (page: number, pageSize?: number) => void;
  deleteUser: (id) => void;
  resetPassword: (id) => void;
  search: string;
  page: number;
  pageSize: number;
  list: any[];
  isRoot: boolean;
  history: any;
}

interface IState {
  visible: boolean;
}

class UserList extends Component<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  async componentDidMount() {
    if (!this.props.isRoot) {
      this.props.history.replace('/');
      return null;
    }
    const result = await this.props.getUserInfo();
    if (result) {
      this.props.getUsers();
    }
  }

  componentWillUnmount() {
    this.props.resetUsers();
  }

  onCreate = (values) => {
    this.props.createUser(values, this.hideModal);
  };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  hideModal = () => {
    this.setState({
      visible: false
    });
  };

  render() {
    const { search, page, pageSize, list } = this.props;
    const { visible } = this.state;
    const filteredList = list.filter((d) => d.name.indexOf(search) !== -1);
    const total = filteredList.length;
    const showedList = filteredList.slice((page - 1) * pageSize, page * pageSize);
    return (
      <div className="panel">
        <Title title="用户管理" />
        <TransferScroll type="all" />
        <UserListHeader search={search} onSearch={this.props.onSearch} onCreate={this.showModal} />
        <UserListTable
          page={page}
          pageSize={pageSize}
          list={showedList}
          total={total}
          onPageChange={this.props.onPageChange}
          onDelete={this.props.deleteUser}
          onResetPassword={this.props.resetPassword}
        />
        {visible && <UserCreateModal visible={visible} onSubmit={this.onCreate} onHide={this.hideModal} />}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.user.users,
    isRoot: state.user?.userInfo.role === 2
  };
}

const mapDispatchToProps = {
  getUserInfo: getUserInfo,
  getUsers: getUsers,
  onPageChange: changeUsersPage,
  onSearch: searchUsers,
  resetUsers: resetUsers,
  createUser: createUser,
  deleteUser: deleteUser,
  resetPassword: resetPassword
};

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(UserList));
