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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled from 'styled-components';
import { Typography, CheckboxSlider, Button } from '../../../Common';
export var AdvancedConsent = (_ref) => {
  var {
    setDetails,
    moreInfo,
    acceptAll,
    saveChanges,
    cookiesMap,
    handleToggle,
    isChecked,
    onSave,
    onAcceptAll
  } = _ref;

  var renderCookies = () => {
    if (cookiesMap) {
      var cookies = Object.keys(cookiesMap);
      return cookies.map(cookie => /*#__PURE__*/React.createElement(Content, {
        key: cookiesMap[cookie].key
      }, /*#__PURE__*/React.createElement("div", {
        className: "d-flex justify-content-between align-items-center"
      }, /*#__PURE__*/React.createElement(Title, null, cookie), /*#__PURE__*/React.createElement(CheckboxSlider, {
        onChange: () => handleToggle(cookie),
        isChecked: cookiesMap[cookie].isRequired || isChecked[cookie]
      })), /*#__PURE__*/React.createElement(Description, null, cookiesMap[cookie].description), /*#__PURE__*/React.createElement(MoreInfo, {
        onClick: () => setDetails(cookie)
      }, moreInfo)));
    }

    return null;
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "d-flex flex-column flex-lg-row flex-wrap"
  }, renderCookies()), /*#__PURE__*/React.createElement("span", {
    className: "d-lg-flex justify-conent-center"
  }, /*#__PURE__*/React.createElement(StyledButton, {
    fullWidth: true,
    bordered: true,
    onClick: onAcceptAll
  }, /*#__PURE__*/React.createElement("span", null, acceptAll)), /*#__PURE__*/React.createElement(StyledButton, {
    fullWidth: true,
    onClick: onSave
  }, /*#__PURE__*/React.createElement("span", null, saveChanges))));
};
var Content = styled.div.attrs({
  className: 'my-lg-2 my-2 mx-lg-2 p-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  font-size: 1.2rem;\n  background: ", ";\n\n  @media (min-width: ", ") {\n    font-size: 16px;\n    width: 45%;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.whiteSmoke;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var Title = styled(Typography).attrs({
  variant: 5,
  className: 'my-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n"])));
var Description = styled(Typography).attrs({
  variant: 6
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var MoreInfo = styled(Typography).attrs({
  className: 'my-1',
  variant: 6
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  text-decoration: underline;\n  font-weight: 600;\n"])));
var StyledButton = styled(Button).attrs({
  className: 'mx-lg-2 my-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    width: 45% !important;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map