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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import { ShippingModulesTypeEnum } from '@sentecacommerce-theme/lib';
import React from 'react';
import styled, { css } from 'styled-components';
import { IconCheck, IconDelivery, IconStore, Typography } from '../../../../../Common';
export var CheckoutCourierInput = (_ref) => {
  var {
    options
  } = _ref;
  return /*#__PURE__*/React.createElement("div", null, options.map(option => /*#__PURE__*/React.createElement(Option, {
    onClick: option.methods[0].onClick,
    isSelected: option.isSelected,
    key: option.key
  }, /*#__PURE__*/React.createElement(Name, null, option.label), /*#__PURE__*/React.createElement(Description, null, option.value === ShippingModulesTypeEnum.PickUpFromStore ? /*#__PURE__*/React.createElement(IconStore, null) : /*#__PURE__*/React.createElement(IconDelivery, null), option.info), option.isSelected && /*#__PURE__*/React.createElement(Check, null, /*#__PURE__*/React.createElement(IconCheck, null)))));
};
var Option = styled.div.attrs({
  className: 'py-3 px-4 mb-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.light;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
}, props => props.isSelected && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-color: ", " !important;\n      pointer-events: none;\n    "])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}));
var Name = styled(Typography).attrs({
  as: 'p',
  variant: 6,
  className: 'mb-1'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-transform: uppercase;\n  font-weight: bold;\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
});
var Description = styled(Typography).attrs({
  as: 'p',
  variant: 7,
  className: 'd-flex'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
});
var Check = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map