import PrivacySettingsTable from "./PrivacySettingsTable";
import { Button } from "../Button/index";
import { Dialog } from "../Dialog/index";
import { getPrivacySettings, setPrivacySettings } from "./privacySettings";
import { t } from "../i18n";
import { useState } from "preact/compat";
import { jsx as _jsx } from "preact/compat/jsx-runtime";
import { jsxs as _jsxs } from "preact/compat/jsx-runtime";
export const privacySettingConfigs = [{
  settingsKey: 'c3',
  translationKey: 'advertising'
}, {
  settingsKey: 'c4',
  translationKey: 'socialMedia'
}, {
  settingsKey: 'c2',
  translationKey: 'webAnalytics'
}];
/**
 * The PrivacySettingsDialog allows users to adjust their privacy settings.
 * Typically these settings are accessed from a button in the footer of a CMS
 * website. Props allow for customizing on a per-domain basis.
 */
export const PrivacySettingsDialog = props => {
  const [localPrivacySettings, setLocalPrivacySettings] = useState(getPrivacySettings());
  function setPrivacySetting(settingsKey, value) {
    setLocalPrivacySettings({
      ...localPrivacySettings,
      [settingsKey]: value
    });
  }
  function savePrivacySettings() {
    setPrivacySettings(localPrivacySettings);
    props.onExit();
  }
  const {
    domain,
    privacyPolicyUrl,
    thirdPartyPoliciesUrl,
    ...dialogProps
  } = props;
  const privacySettingsProperties = privacySettingConfigs.map(config => ({
    ...config,
    value: localPrivacySettings[config.settingsKey]
  }));
  let intro = t('privacy.introText', {
    domain
  });
  intro += ' ' + t('privacy.privacyPolicy', {
    url: privacyPolicyUrl
  });
  if (thirdPartyPoliciesUrl) {
    intro += ' ' + t('privacy.thirdPartyPolicies', {
      url: thirdPartyPoliciesUrl
    });
  }
  intro += '.';
  return /*#__PURE__*/_jsxs(Dialog, {
    ...dialogProps,
    heading: t('privacy.dialogTitle', {
      domain
    }),
    size: "full",
    actions: /*#__PURE__*/_jsx(Button, {
      variation: "solid",
      onClick: savePrivacySettings,
      children: t('privacy.save')
    }),
    isOpen: props.isOpen,
    children: [/*#__PURE__*/_jsx("p", {
      className: "ds-u-margin-top--0",
      dangerouslySetInnerHTML: {
        __html: intro
      }
    }), /*#__PURE__*/_jsx(PrivacySettingsTable, {
      domain: domain,
      privacySettings: privacySettingsProperties,
      setPrivacySetting: setPrivacySetting
    })]
  });
};
export default PrivacySettingsDialog;