import React, { useState } from 'react';
import { connect } from 'react-redux';
import { useToasts } from 'react-toast-notifications';
import styled from 'styled-components';
import { AvatarWithText } from '../../components/common/avatars/Avatar';
import { IconTxtButton } from '../../components/common/buttons/IconButton';
import {
  NofillButton,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import FormTaggedInput from '../../components/common/inputs/FormTaggedInputs';
import {
  getAllForms,
  getFormUsers,
  inViteFormUsers,
} from '../../redux/action-creators/form-actions/forms.actions';
import { getNameInitials } from '../../utils/helpers';

const InviteFormUser = ({
  setvisible,
  formUsers,
  formId,
  inViteFormUsers,
  getFormUsers,
  getAllForms,
}) => {
  const [inviteList, setUpdateList] = useState([]);
  const [selectedPermission, setSelectedPermission] = useState('editor');
  const [saving, setSaving] = useState(false);
  const [tags, setTags] = useState([]);
  const [tempTag, setTempTag] = useState('');
  const { addToast } = useToasts();

  const onInviteFormUser = async () => {
    setSaving(true);
    const inviteDetails = {
      emails: inviteList,
      accessType: selectedPermission,
    };
    const inviteData = await inViteFormUsers(formId, inviteDetails);
    if (inviteData?.success) {
      getFormUsers(formId);
      addToast('Form invite sent successfully', { appearance: 'success' });
      setTags([]);
      getAllForms();
      setvisible(false);
    } else {
      addToast(inviteData?.error, {
        appearance: 'error',
      });
    }

    setSaving(false);
  };

  return (
    <>
      <div className="modal-body overflow-y">
        <FormTaggedInput
          tags={tags}
          setTags={setTags}
          tempTag={tempTag}
          setTempTag={setTempTag}
          setUpdateList={setUpdateList}
          selectedPermission={selectedPermission}
          setSelectedPermission={setSelectedPermission}
          placeholder="Saperate emails with commas"
        />
        <div className="colaborator-wrapper">
          <h3 className="section-title">Collaborators</h3>
          <ColabLists>
            {formUsers?.users?.map((user, i) => {
              return (
                <ColabListItem key={i} className="d-flx-alc-jsb">
                  <div>
                    <AvatarWithText
                      image={user.profilePicture ? user.profilePicture : ''}
                      initials={getNameInitials(
                        `${user.firstName} ${user.lastName}`
                      )}
                      name={`${user.firstName ? user.firstName : 'New'} ${
                        user.lastName ? user.lastName : 'User'
                      }`}
                      email={user.email}
                    />
                  </div>
                  <span>{/* <AccessMenu onchange={onChangeRole} /> */}</span>
                </ColabListItem>
              );
            })}
          </ColabLists>
        </div>
      </div>
      <div className="alt-modal-footer border-top">
        <div className="d-flx-alc-jsb">
          <IconTxtButton
            title="Copy link"
            svg="copy-link"
            extraName="bigger-icon"
          />
          <div className="d-flx-alc modal-action-wrap">
            <NofillButton onclick={() => setvisible(false)} title="cancel" />
            <PrimaryButton
              text={saving ? 'Sending...' : 'Send invite'}
              onclick={() => onInviteFormUser()}
            />
          </div>
        </div>
      </div>
    </>
  );
};

const mapStateToProps = state => ({
  formUsers: state.forms.formUsers,
});

export default connect(mapStateToProps, {
  inViteFormUsers,
  getFormUsers,
  getAllForms,
})(InviteFormUser);

const ColabLists = styled.ul`
  height: 270px;
  overflow: auto;
`;
const ColabListItem = styled.li`
  padding: 1.5rem 0;
  border-bottom: 1px solid #e8edff;
`;
