import React, { useEffect, useState } from 'react';
import {
  NofillButton,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import styled from 'styled-components';
import { LargeModal } from '../modals/ModalWrapper.modal';
import TaggedInputs from '../../components/common/inputs/TaggedInputs';
import { connect } from 'react-redux';
import { inviteCollaborators } from '../../redux/action-creators/workspace-actions/workspace.actions';
import { useToasts } from 'react-toast-notifications';
import { getAllUsers } from '../../redux/action-creators/users-actions/users.actions';
import { AvatarWText } from '../../components/common/avatars/AvatarWText';
import { getNameInitials } from '../../utils/helpers';

const TeamMembers = ({ allUsers, getAllUsers, inviteCollaborators }) => {
  const [openNewTeam, setOpenNewTeam] = useState(false);
  const [inviteList, setUpdateList] = useState([]);
  const [inviteRole, setInviteRole] = useState({});
  const [sendingInvite, setSendingInvite] = useState(false);
  const { addToast } = useToasts();

  const onChangeRole = access => {
    setInviteRole(access);
  };

  const onInviteCollaborators = async () => {
    setSendingInvite(true);
    const inviteDetails = {
      emails: inviteList,
      role: inviteRole._id,
    };
    const inviteData = await inviteCollaborators(inviteDetails);

    if (inviteData?.success) {
      getAllUsers('workspace');
      addToast(`${inviteData?.data?.created} invites sent successfully`, {
        appearance: 'success',
      });
      setOpenNewTeam(false);
    } else {
      addToast(inviteData?.error, {
        appearance: 'error',
      });
    }

    setSendingInvite(false);
  };

  useEffect(() => {
    const onGetAllusers = async () => {
      const res = await getAllUsers('workspace');
      return res;
    };

    onGetAllusers();
  }, [getAllUsers]);
  return /*#__PURE__*/ React.createElement(
    Members,
    null,
    /*#__PURE__*/ React.createElement(
      TeamHeader,
      null,
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'team-top',
        },
        /*#__PURE__*/ React.createElement('h2', null, 'Team Members'),
        /*#__PURE__*/ React.createElement(
          'div',
          null,
          /*#__PURE__*/ React.createElement(PrimaryButton, {
            text: 'Add new member',
            onclick: () => setOpenNewTeam(true),
          }),
          /*#__PURE__*/ React.createElement(
            LargeModal,
            {
              visible: openNewTeam,
              setvisible: setOpenNewTeam,
              title: 'Add Members',
              height: 310,
            },
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'modal-body',
              },
              /*#__PURE__*/ React.createElement(TaggedInputs, {
                setUpdateList: setUpdateList,
                onChangeRole: onChangeRole,
                inviteRole: inviteRole,
                placeholder: 'Separate names by commas',
              })
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'd-flx-alc-jfe modal-action-wrap alt-modal-footer',
              },
              /*#__PURE__*/ React.createElement(NofillButton, {
                title: 'cancel',
                onclick: () => setOpenNewTeam(false),
              }),
              /*#__PURE__*/ React.createElement(PrimaryButton, {
                text: 'Send Invites',
                loading: sendingInvite,
                onclick: () => onInviteCollaborators(),
              })
            )
          )
        )
      )
    ),
    /*#__PURE__*/ React.createElement(
      ColabLists,
      null,
      allUsers?.users?.map((user, i) => {
        return /*#__PURE__*/ React.createElement(
          ColabListItem,
          {
            className: 'd-flx-alc-jsb',
            key: i,
          },
          /*#__PURE__*/ React.createElement(
            'div',
            null,
            /*#__PURE__*/ React.createElement(AvatarWText, {
              initials: getNameInitials(
                user && user.firstName
                  ? `${user?.firstName} ${user?.lastName}`
                  : 'New User'
              ),
              image: user?.profilePicture,
              name:
                user && user.firstName
                  ? `${user.firstName} ${user.lastName}`
                  : 'New User',
              email: user?.email,
            })
          ),
          /*#__PURE__*/ React.createElement('p', null, 'Owner')
        );
      })
    )
  );
};

const mapStateToProps = state => ({
  allUsers: state.users.allUsers,
});

export default connect(mapStateToProps, {
  getAllUsers,
  inviteCollaborators,
})(TeamMembers);
const TeamHeader = styled.div`
  .team-top {
    display: flex;
    justify-content: space-between;

    align-items: center;
  }
`;
const Members = styled.div`
  margin-right: 10rem;
`;
const ColabLists = styled.ul`
  height: 240px;
  margin-top: 3rem;
`;
const ColabListItem = styled.li`
  padding: 1.5rem 0;
  border-bottom: 1px solid #e8edff;
`;
