"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.CheckoutCourierInput = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _lib = require("@sentecacommerce-theme/lib");

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _Common = require("../../../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var CheckoutCourierInput = function CheckoutCourierInput(_ref) {
  var options = _ref.options;
  return /*#__PURE__*/_react["default"].createElement("div", null, options.map(function (option) {
    return /*#__PURE__*/_react["default"].createElement(Option, {
      onClick: option.methods[0].onClick,
      isSelected: option.isSelected,
      key: option.key
    }, /*#__PURE__*/_react["default"].createElement(Name, null, option.label), /*#__PURE__*/_react["default"].createElement(Description, null, option.value === _lib.ShippingModulesTypeEnum.PickUpFromStore ? /*#__PURE__*/_react["default"].createElement(_Common.IconStore, null) : /*#__PURE__*/_react["default"].createElement(_Common.IconDelivery, null), option.info), option.isSelected && /*#__PURE__*/_react["default"].createElement(Check, null, /*#__PURE__*/_react["default"].createElement(_Common.IconCheck, null)));
  }));
};

exports.CheckoutCourierInput = CheckoutCourierInput;

var Option = _styledComponents["default"].div.attrs({
  className: 'py-3 px-4 mb-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border: 0.1rem solid ", ";\n  cursor: pointer;\n  position: relative;\n\n  &:last-of-type {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  ", "\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.light;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
}, function (props) {
  return props.isSelected && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      border-color: ", " !important;\n      pointer-events: none;\n    "])), function (_ref4) {
    var theme = _ref4.theme;
    return theme.palette.primary;
  });
});

var Name = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  variant: 6,
  className: 'mb-1'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  text-transform: uppercase;\n  font-weight: bold;\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
});
var Description = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  variant: 7,
  className: 'd-flex'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n\n  & > svg {\n    min-width: 2rem;\n    max-width: 2rem;\n    margin-right: 0.8rem;\n    height: 2.4rem;\n    margin-top: -0.2rem;\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
});

var Check = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 2.4rem;\n  height: 2.4rem;\n  position: absolute;\n  right: -0.8rem;\n  top: -0.8rem;\n  border-radius: 50%;\n\n  display: flex;\n\n  background-color: ", ";\n  color: ", ";\n\n  & > svg {\n    min-width: 1.4rem;\n    max-width: 1.4rem;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.primary;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map