import React, { useState, useMemo, useCallback, useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NovaCompositionCoorpacademyCheck as CheckIcon, NovaCompositionCoorpacademyShare as ShareIcon, NovaCompositionCoorpacademyAttention as AttentionIcon } from '@coorpacademy/nova-icons';
import Link from '../../atom/link';
import styles from './style.css';
const SHARE_STATUS = {
  IDLE: 'IDLE',
  ERROR: 'ERROR',
  SUCCESS: 'SUCCESS'
};
const copyTextViaExecCommand = text => {
  const textarea = document.createElement('textarea');
  textarea.style.border = '0';
  textarea.style.padding = '0';
  textarea.style.visibility = 'hidden';
  textarea.style.position = 'absolute';
  textarea.setAttribute('readonly', '');
  textarea.value = text;

  // Element.append is not supported on IE11 :/
  // eslint-disable-next-line unicorn/prefer-node-append
  document.body.appendChild(textarea);
  let status = SHARE_STATUS.IDLE;
  try {
    textarea.select();
    textarea.setSelectionRange(0, textarea.value.length);
    document.execCommand('copy');
    status = SHARE_STATUS.SUCCESS;
  } catch (error) {
    status = SHARE_STATUS.ERROR;
  }

  // Element.remove is not supported on IE11 :/
  // eslint-disable-next-line unicorn/prefer-node-remove
  document.body.removeChild(textarea);
  return status;
};
const StatusContext = /*#__PURE__*/React.createContext(SHARE_STATUS.IDLE);
export const ShareStatusProvider = ({
  children
}) => {
  const [status, setStatus] = useState(SHARE_STATUS.IDLE);
  useEffect(() => {
    let timeoutId;
    const DURATION = 3000;
    if (status !== SHARE_STATUS.IDLE) {
      timeoutId = setTimeout(() => setStatus(SHARE_STATUS.IDLE), DURATION);
    }
    return () => clearTimeout(timeoutId);
  }, [status]);
  const value = useMemo(() => [status, setStatus], [status]);
  return /*#__PURE__*/React.createElement(StatusContext.Provider, {
    value: value
  }, children);
};
export const ShareFeedback = ({
  successWording,
  errorWording
}) => {
  const [status] = useContext(StatusContext);
  if (status === SHARE_STATUS.IDLE) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(styles.feedback, status === SHARE_STATUS.ERROR && styles.errorFeedback)
  }, status === SHARE_STATUS.SUCCESS ? /*#__PURE__*/React.createElement(CheckIcon, {
    className: styles.checkIcon,
    width: 13,
    height: 13
  }) : /*#__PURE__*/React.createElement(AttentionIcon, {
    className: styles.checkIcon,
    width: 13,
    height: 13
  }), status === SHARE_STATUS.SUCCESS ? /*#__PURE__*/React.createElement("p", {
    role: "status"
  }, successWording) : /*#__PURE__*/React.createElement("p", {
    role: "alert"
  }, errorWording));
};
const Share = ({
  style,
  text,
  wording
}) => {
  const [, setStatus] = useContext(StatusContext);
  const onClick = useCallback(async () => {
    const browserSupportsClipboardWriteText = 'clipboard' in navigator && 'writeText' in navigator.clipboard;
    if (browserSupportsClipboardWriteText) {
      try {
        await navigator.clipboard.writeText(text);
        setStatus(SHARE_STATUS.SUCCESS);
      } catch (error) {
        setStatus(SHARE_STATUS.ERROR);
      }
      return;
    } else {
      const copyStatus = copyTextViaExecCommand(text);
      setStatus(copyStatus);
    }
    return;
  }, [setStatus, text]);
  return /*#__PURE__*/React.createElement("div", {
    className: (styles.container, style)
  }, /*#__PURE__*/React.createElement(Link, {
    onClick: onClick,
    className: styles.cta,
    "data-name": 'share-button'
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.wrapper
  }, /*#__PURE__*/React.createElement(ShareIcon, {
    className: styles.shareIcon,
    width: 18,
    height: 18
  }), /*#__PURE__*/React.createElement("p", null, wording))));
};
ShareStatusProvider.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node
} : {};
ShareFeedback.propTypes = process.env.NODE_ENV !== "production" ? {
  successWording: PropTypes.string,
  errorWording: PropTypes.string
} : {};
Share.propTypes = process.env.NODE_ENV !== "production" ? {
  style: PropTypes.string,
  text: PropTypes.string,
  wording: PropTypes.string
} : {};
export default Share;
//# sourceMappingURL=index.js.map