import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { useGlobalLabels, Html } from '@sentecacommerce-theme/lib';
import { Checkbox, Typography } from '../../../../';
export var ConsentsList = (_ref) => {
  var _Object$keys;

  var {
    allSubs,
    checkedSubs,
    clickSub
  } = _ref;
  var {
    productRestock
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    style: {
      marginTop: '1rem'
    }
  }, (_Object$keys = Object.keys(allSubs != null ? allSubs : {})) == null ? void 0 : _Object$keys.map((sub, i) => {
    return /*#__PURE__*/React.createElement(Check, {
      key: "sub__" + i
    }, /*#__PURE__*/React.createElement(Checkbox, {
      onChange: () => clickSub(sub),
      isChecked: checkedSubs == null ? void 0 : checkedSubs[sub],
      size: "small"
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        width: '100%',
        cursor: 'pointer'
      },
      onClick: () => clickSub(sub)
    }, allSubs == null ? void 0 : allSubs[sub].label));
  })), /*#__PURE__*/React.createElement(Description, {
    notice: true
  }, /*#__PURE__*/React.createElement(Html, null, productRestock.GDPRNotice)));
};
var Check = styled.span.attrs({
  className: 'd-flex align-items-center'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  & > div {\n    align-items: center;\n    justify-content: center;\n    height: 2.4rem;\n    & > div {\n      margin: auto auto;\n      width: fit-content !important;\n      height: fit-content !important;\n    }\n  }\n"])));
var Description = styled(Typography).attrs({
  variant: 5
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  max-width: 50rem;\n  ", "\n"])), (_ref2) => {
  var {
    notice,
    theme
  } = _ref2;
  return notice && "\n    align-self: flex-end;\n    font-size: 1.2rem;\n    opacity: 0.8;\n    max-width: 100%;\n    @media (min-width: " + theme.breakpoints.lg.min + ") {\n      max-width: 91%;\n    }\n\n    & > div{\n      & > a {\n        text-decoration: underline;\n      }\n    }\n  ";
});
//# sourceMappingURL=index.js.map