import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { FadeDiv } from 'utils';
import { inviteGroupMembersAction } from 'store/actions/group';
import InviteDialogGroup from 'components/InviteDialogGroup';
import MemberItem from './MemberItem';

import './style.scss';

function InviteGroup(props) {
  const {
    // team,
    isInviting,
    nextStep,
    user: authUser,
    selectedMembers,
    setSelectedMembers,
    // setInvitedMembers,
  } = props;

  // const [search, setSearch] = useState('');
  // const [selectedMembers, setSelectedMembers] = useState([]);
  // const [filteredMembers, setFilteredMembers] = useState([]);
  const [showInvite, setShowInvite] = useState(false);
  const [errorMsg, setErrorMsg] = useState(null);

  // const onChange = useCallback((e) => {
  //   setSearch(e.target.value);
  // }, []);

  // useEffect(() => {
  //   setFilteredMembers(selectedMembers.filter((mem) => (
  //     mem.name.toLowerCase().includes(search.toLowerCase())
  //     || mem.email.toLowerCase().includes(search.toLowerCase())
  //   )));
  // }, [search, selectedMember]);

  // const invitedUsers = selectedMembers || [];

  const handleInvite = useCallback((users, note) => {
    setSelectedMembers([...selectedMembers, ...users.map((u) => ({ ...u, note }))]);
    setShowInvite(false);
  }, [selectedMembers]);

  return (
    <div className="group-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">Invite Group Members</h2>
          <div className="title-cross" />
        </div>
        Invite at least 1 or more member to your group
        <div className="invite-member-wrapper">
          <div className="search-box">
            {/*
            <input
              type="text"
              placeholder="Filter by name"
              value={search}
              onChange={onChange}
            />
            */}

            <InviteDialogGroup
              handleInvite={handleInvite}
              visible={showInvite}
              setShowInvite={setShowInvite}
              authUser={{ ...authUser, role: 'owner' }}
              users={selectedMembers}
            />
          </div>

          <div className="member-list">
            {/*
            <div className="member-list-content">
              {invitedUsers.map((user) => (
                <MemberItem
                  key={user.id}
                  invited
                  isInviting={isInviting}
                  user={user}
                />
              ))}
            </div>
            */}

            <div className="member-list-content">
              {selectedMembers.map((user) => (
                <MemberItem
                  key={user.id}
                  invited
                  isInviting={isInviting}
                  selected={false}
                  user={user}
                  selectMember={setSelectedMembers}
                  // inviteUser={handleInvite}
                />
              ))}
            </div>
          </div>
          <div style={{ color: 'red' }}>
            {errorMsg}
          </div>
          <button
            type="button"
            className="create-group-continue-btn"
            onClick={() => {
              // setInvitedMembers(selectedMembers.map(
              //   // eslint-disable-next-line no-restricted-globals
              //   ({ id, ...mem }) => ({ id: isNaN(id) ? 0 : id, ...mem }),
              // ));
              if (selectedMembers.length > 0) {
                nextStep();
              } else {
                setErrorMsg('Invite at least 1 member');
              }
            }}
          >
            Continue
          </button>
        </div>
      </FadeDiv>
    </div>
  );
}

InviteGroup.propTypes = {
  user: PropTypes.object.isRequired,
  // team: PropTypes.object.isRequired,
  isInviting: PropTypes.bool.isRequired,
  nextStep: PropTypes.func.isRequired,
  selectedMembers: PropTypes.func.isRequired,
  setSelectedMembers: PropTypes.func.isRequired,
  // setInvitedMembers: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  user: state.auth.user,
});

const mapDispatchToProps = (dispatch) => ({
  setInvitedMembers: (users) => dispatch(inviteGroupMembersAction(users)),
});

export default connect(mapStateToProps, mapDispatchToProps)(InviteGroup);