"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.UsaBanner = void 0;
var _compat = require("preact/compat");
var _classnames = _interopRequireDefault(require("classnames"));
var _useCssDebugger = _interopRequireDefault(require("../utilities/useCssDebugger"));
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _i18n = require("../i18n");
var _Icons = require("../Icons");
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/usa-banner/).
 */
const UsaBanner = props => {
  (0, _useCssDebugger.default)();
  const [isBannerOpen, setBannerOpen] = (0, _compat.useState)(false);
  const classes = (0, _classnames.default)('ds-c-usa-banner', props.className);
  const rootId = (0, _useId.default)('usa-banner--', props.id);
  const panelId = `${rootId}__panel`;
  const toggleBanner = () => {
    setBannerOpen(!isBannerOpen);
  };
  const actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _i18n.t)('usaBanner.bannerActionText'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowIcon, {
      direction: isBannerOpen ? 'up' : 'down',
      className: "ds-c-usa-banner__action-icon"
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
    className: classes,
    "aria-label": (0, _i18n.t)('usaBanner.bannerLabel'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
      className: (0, _classnames.default)('ds-c-usa-banner__header ds-u-font-size--sm', isBannerOpen && 'ds-c-usa-banner__header--expanded'),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.UsaFlagIcon, {
        className: "ds-c-usa-banner__header-icon"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "ds-c-usa-banner__header-text",
        children: (0, _i18n.t)('usaBanner.bannerText')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: (0, _classnames.default)('ds-c-usa-banner__action ds-u-align-items--center ds-u-md-display--none', !isBannerOpen && 'ds-u-display--flex'),
        children: actionText
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
        type: "button",
        onClick: toggleBanner,
        className: "ds-c-usa-banner__button",
        "aria-expanded": isBannerOpen,
        "aria-controls": panelId,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "ds-c-usa-banner__button-text ds-u-md-display--flex ds-u-align-items--center",
          children: actionText
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "ds-c-usa-banner__button-icon-container",
          hidden: !isBannerOpen,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CloseIconThin, {
            className: "ds-c-usa-banner__button-icon"
          })
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "ds-c-usa-banner__guidance [ ds-u-leading--base ds-u-font-size--base ]",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        id: panelId,
        className: "ds-c-usa-banner__guidance-container",
        hidden: !isBannerOpen,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "ds-c-usa-banner__guidance-item",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.BuildingCircleIcon, {
            className: "ds-c-usa-banner__guidance-icon"
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
            className: "ds-c-usa-banner__guidance-text",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: (0, _i18n.t)('usaBanner.domainHeaderText')
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), `${(0, _i18n.t)('usaBanner.domainAText')} `, /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: ` ${(0, _i18n.t)('usaBanner.govText')} `
            }), (0, _i18n.t)('usaBanner.domainText')]
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "ds-c-usa-banner__guidance-item",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.LockCircleIcon, {
            className: "ds-c-usa-banner__guidance-icon"
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
            className: "ds-c-usa-banner__guidance-text",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: (0, _i18n.t)('usaBanner.httpsHeaderText')
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), `${(0, _i18n.t)('usaBanner.httpsAText')} `, /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: `${(0, _i18n.t)('usaBanner.httpsLockText')} `
            }), "(", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.LockIcon, {
              className: "ds-c-usa-banner__inline-lock-icon"
            }), ")", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              children: ` ${(0, _i18n.t)('usaBanner.httpsOrText')}`
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: ` ${(0, _i18n.t)('usaBanner.httpsText')} `
            }), (0, _i18n.t)('usaBanner.httpsDetailText')]
          })]
        })]
      })
    })]
  });
};
exports.UsaBanner = UsaBanner;
var _default = exports.default = UsaBanner;