import { useState } from "preact/compat";
import classNames from 'classnames';
import useCssDebugger from "../utilities/useCssDebugger";
import useId from "../utilities/useId";
import { t } from "../i18n";
import { LockCircleIcon, LockIcon, UsaFlagIcon, BuildingCircleIcon, ArrowIcon, CloseIconThin } from "../Icons";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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/usa-banner/).
 */
export const UsaBanner = props => {
  useCssDebugger();
  const [isBannerOpen, setBannerOpen] = useState(false);
  const classes = classNames('ds-c-usa-banner', props.className);
  const rootId = useId('usa-banner--', props.id);
  const panelId = `${rootId}__panel`;
  const toggleBanner = () => {
    setBannerOpen(!isBannerOpen);
  };
  const actionText = /*#__PURE__*/_jsxs(_Fragment, {
    children: [t('usaBanner.bannerActionText'), /*#__PURE__*/_jsx(ArrowIcon, {
      direction: isBannerOpen ? 'up' : 'down',
      className: "ds-c-usa-banner__action-icon"
    })]
  });
  return /*#__PURE__*/_jsxs("section", {
    className: classes,
    "aria-label": t('usaBanner.bannerLabel'),
    children: [/*#__PURE__*/_jsxs("header", {
      className: classNames('ds-c-usa-banner__header ds-u-font-size--sm', isBannerOpen && 'ds-c-usa-banner__header--expanded'),
      children: [/*#__PURE__*/_jsx(UsaFlagIcon, {
        className: "ds-c-usa-banner__header-icon"
      }), /*#__PURE__*/_jsx("p", {
        className: "ds-c-usa-banner__header-text",
        children: t('usaBanner.bannerText')
      }), /*#__PURE__*/_jsx("p", {
        className: classNames('ds-c-usa-banner__action ds-u-align-items--center ds-u-md-display--none', !isBannerOpen && 'ds-u-display--flex'),
        children: actionText
      }), /*#__PURE__*/_jsxs("button", {
        type: "button",
        onClick: toggleBanner,
        className: "ds-c-usa-banner__button",
        "aria-expanded": isBannerOpen,
        "aria-controls": panelId,
        children: [/*#__PURE__*/_jsx("span", {
          className: "ds-c-usa-banner__button-text ds-u-md-display--flex ds-u-align-items--center",
          children: actionText
        }), /*#__PURE__*/_jsx("span", {
          className: "ds-c-usa-banner__button-icon-container",
          hidden: !isBannerOpen,
          children: /*#__PURE__*/_jsx(CloseIconThin, {
            className: "ds-c-usa-banner__button-icon"
          })
        })]
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: "ds-c-usa-banner__guidance [ ds-u-leading--base ds-u-font-size--base ]",
      children: /*#__PURE__*/_jsxs("div", {
        id: panelId,
        className: "ds-c-usa-banner__guidance-container",
        hidden: !isBannerOpen,
        children: [/*#__PURE__*/_jsxs("div", {
          className: "ds-c-usa-banner__guidance-item",
          children: [/*#__PURE__*/_jsx(BuildingCircleIcon, {
            className: "ds-c-usa-banner__guidance-icon"
          }), /*#__PURE__*/_jsxs("p", {
            className: "ds-c-usa-banner__guidance-text",
            children: [/*#__PURE__*/_jsx("strong", {
              children: t('usaBanner.domainHeaderText')
            }), /*#__PURE__*/_jsx("br", {}), `${t('usaBanner.domainAText')} `, /*#__PURE__*/_jsx("strong", {
              children: ` ${t('usaBanner.govText')} `
            }), t('usaBanner.domainText')]
          })]
        }), /*#__PURE__*/_jsxs("div", {
          className: "ds-c-usa-banner__guidance-item",
          children: [/*#__PURE__*/_jsx(LockCircleIcon, {
            className: "ds-c-usa-banner__guidance-icon"
          }), /*#__PURE__*/_jsxs("p", {
            className: "ds-c-usa-banner__guidance-text",
            children: [/*#__PURE__*/_jsx("strong", {
              children: t('usaBanner.httpsHeaderText')
            }), /*#__PURE__*/_jsx("br", {}), `${t('usaBanner.httpsAText')} `, /*#__PURE__*/_jsx("strong", {
              children: `${t('usaBanner.httpsLockText')} `
            }), "(", /*#__PURE__*/_jsx(LockIcon, {
              className: "ds-c-usa-banner__inline-lock-icon"
            }), ")", /*#__PURE__*/_jsx("span", {
              children: ` ${t('usaBanner.httpsOrText')}`
            }), /*#__PURE__*/_jsx("strong", {
              children: ` ${t('usaBanner.httpsText')} `
            }), t('usaBanner.httpsDetailText')]
          })]
        })]
      })
    })]
  });
};
export default UsaBanner;