import { ChoiceList } from "../ChoiceList/index";
import { Table, TableHead, TableRow, TableCell, TableBody } from "../Table/index";
import { t } from "../i18n";
import { jsx as _jsx } from "preact/compat/jsx-runtime";
import { jsxs as _jsxs } from "preact/compat/jsx-runtime";
export const PrivacySettingsTable = _ref => {
  let {
    domain,
    privacySettings,
    setPrivacySetting
  } = _ref;
  function renderToggle(settingsKey, value, category, description) {
    const choices = [{
      label: t('privacy.allow'),
      value: '0',
      checked: value === '0'
    }, {
      label: t('privacy.dontAllow'),
      value: '1',
      checked: value === '1'
    }];
    const label = /*#__PURE__*/_jsx("span", {
      className: "ds-u-visibility--screen-reader",
      children: category
    });
    return /*#__PURE__*/_jsx(ChoiceList, {
      type: "radio",
      choices: choices,
      onChange: event => {
        setPrivacySetting(settingsKey, event.target.value);
      },
      className: "ds-u-margin-top--0",
      label: label,
      "aria-label": description,
      name: `cookie-${settingsKey}`
    });
  }
  const categoryHeaderId = 'privacy-settings-header-category';
  const descriptionHeaderId = 'privacy-settings-header-description';
  const statusHeaderId = 'privacy-settings-header-status';
  function renderRow(_ref2) {
    let {
      settingsKey,
      translationKey,
      value
    } = _ref2;
    const category = t(`privacy.${translationKey}.category`);
    const description = t(`privacy.${translationKey}.description`, {
      domain
    });
    return /*#__PURE__*/_jsxs(TableRow, {
      children: [/*#__PURE__*/_jsx(TableCell, {
        headers: categoryHeaderId,
        stackedTitle: t('privacy.category'),
        children: category
      }), /*#__PURE__*/_jsx(TableCell, {
        headers: descriptionHeaderId,
        stackedTitle: t('privacy.description'),
        children: description
      }), /*#__PURE__*/_jsx(TableCell, {
        headers: statusHeaderId,
        stackedTitle: t('privacy.status'),
        children: renderToggle(settingsKey, value, category, description)
      })]
    }, settingsKey);
  }
  return /*#__PURE__*/_jsxs(Table, {
    className: "ds-c-privacy-settings-table ds-u-margin-top--2 ds-u-lg-margin--0",
    borderless: true,
    stackable: true,
    stackableBreakpoint: "md",
    children: [/*#__PURE__*/_jsx(TableHead, {
      children: /*#__PURE__*/_jsxs(TableRow, {
        children: [/*#__PURE__*/_jsx(TableCell, {
          id: categoryHeaderId,
          children: t('privacy.category')
        }), /*#__PURE__*/_jsx(TableCell, {
          id: descriptionHeaderId,
          children: t('privacy.description')
        }), /*#__PURE__*/_jsx(TableCell, {
          id: statusHeaderId,
          children: t('privacy.status')
        })]
      })
    }), /*#__PURE__*/_jsx(TableBody, {
      children: privacySettings.map(renderRow)
    })]
  });
};
export default PrivacySettingsTable;