import React, { useState, useRef } from 'react';

import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Overlay, Tooltip } from 'react-bootstrap';
import type { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FormattedMessage } from './localization';

const CopyField = ({
  children,
  copyIcon = 'copy',
  icon = null,
}: {
  children: string,
  copyIcon?: IconProp,
  icon?: IconProp,
}) => {
  const [show, setShow] = useState(false);
  const target = useRef(null);
  const textbox = useRef(null);
  let timer: NodeJS.Timeout = null;

  function doCopy() {
    if (timer !== null) {
      clearTimeout(timer);
    }

    textbox.current.select();
    document.execCommand('copy');

    setShow(true);
    timer = setTimeout(() => {
      setShow(false);
    }, 3000);
    return false;
  }

  return (
    <InputGroup>
      {
        icon
          ? (
            <InputGroup.Prepend>
              <InputGroup.Text>
                <FontAwesomeIcon icon="share" />
              </InputGroup.Text>
            </InputGroup.Prepend>
          )
          : ''
      }
      <FormControl ref={textbox} readOnly value={children} />
      <InputGroup.Append>
        <Button ref={target} onClick={doCopy}>
          <FontAwesomeIcon icon={copyIcon} />
          <Overlay target={target.current} show={show} placement="top">
            {(props) => (
              // eslint-disable-next-line react/jsx-props-no-spreading
              <Tooltip id="overlay-copy" {...props}>
                <FormattedMessage
                  id="CopyField.copied"
                  defaultMessage="Copied!"
                  description="Tooltip shown when user clicks the Copy button."
                />
              </Tooltip>
            )}
          </Overlay>
        </Button>
      </InputGroup.Append>
    </InputGroup>
  );
};

export default CopyField;