/* eslint-disable jsx-a11y/label-has-for */
import React, { useRef, useState } from 'react';
import publicSettings from '../../settings/public';
import Invite from '../icons/Invite';
import RoundedButton from './RoundedButton';

interface InviteProps {
  team: string;
}

const InviteLink: React.FC<InviteProps> = ({ team }) => {
  const { domain } = publicSettings();

  const [inviteClick, setInviteClick] = useState<boolean>(false);
  const [showFeedback, setFeedback] = useState<boolean>(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const copyText = (): void => {
    if (inputRef.current) {
      inputRef.current.select();
      inputRef.current.setSelectionRange(0, 99999);
      document.execCommand('copy');
      setFeedback(true);
      document.getSelection()?.empty();
    }
  };
  return (
    <div className="inviteLink">
      {inviteClick ? (
        <div className="inviteWrapper">
          <input
            ref={inputRef}
            className="link"
            value={`${domain}/signUp/${team}`}
            readOnly
          />
          <RoundedButton onClick={copyText} title="Copiar" size="small" />
        </div>
      ) : (
        <RoundedButton
          title="Invitar"
          className="inviteButton"
          size="small"
          onClick={(): void => setInviteClick(true)}
          rightIcon={<Invite size="medium" />}
        />
      )}
      {showFeedback ? (
        <p className="feedback">El vínculo se ha copiado correctamente</p>
      ) : null}
    </div>
  );
};

export default InviteLink;