import { useState } from "preact/compat";
import { Button } from "../Button";
import { Dialog } from "../Dialog";
import { ExternalLinkIcon } from "../Icons";
import { t } from "../i18n";
import classNames from 'classnames';
import useThirdPartyExternalLinkAnalytics from "./useThirdPartyExternalLinkAnalytics";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/compat/jsx-runtime";
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/third-party-external-link/).
 */
const ThirdPartyExternalLink = props => {
  const {
    contentRef,
    buttonAnalyticsHandler
  } = useThirdPartyExternalLinkAnalytics(props);
  const {
    href,
    children,
    className,
    learnMoreUrl,
    origin
  } = props;
  const [showDialog, setShowDialog] = useState(false);
  function open(event) {
    event.preventDefault();
    setShowDialog(true);
  }
  function close() {
    setShowDialog(false);
  }
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs("a", {
      className: classNames('ds-c-external-link', className),
      onClick: open,
      href: href,
      ref: contentRef,
      children: [children, /*#__PURE__*/_jsx(ExternalLinkIcon, {
        className: "ds-c-external-link__icon"
      })]
    }), /*#__PURE__*/_jsxs(Dialog, {
      onExit: close,
      heading: t('thirdPartyExternalLink.dialogHeading', {
        origin
      }),
      actions: [/*#__PURE__*/_jsx(Button, {
        variation: "solid",
        href: href,
        analytics: true,
        onAnalyticsEvent: buttonAnalyticsHandler,
        children: t('thirdPartyExternalLink.confirmationButtonText')
      }, "external-link__confirm"), /*#__PURE__*/_jsx(Button, {
        variation: "ghost",
        onClick: close,
        children: t('thirdPartyExternalLink.cancelButtonText')
      }, "external-link__cancel")],
      isOpen: showDialog,
      children: [/*#__PURE__*/_jsx("p", {
        children: t('thirdPartyExternalLink.dialogBody')
      }), /*#__PURE__*/_jsxs("p", {
        children: [/*#__PURE__*/_jsx("a", {
          href: learnMoreUrl,
          children: t('thirdPartyExternalLink.learnMoreText')
        }), "."]
      })]
    })]
  });
};
ThirdPartyExternalLink.defaultProps = {};
export default ThirdPartyExternalLink;