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