"use strict";

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

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

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

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

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

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

var _checkoutVoucher = require("../../checkoutVoucher.context");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

var CardSelect = function CardSelect(_ref) {
  var currency = _ref.currency;

  var _useCardsContext = (0, _checkoutVoucher.useCardsContext)(),
      cardId = _useCardsContext.cardId,
      cards = _useCardsContext.cards,
      updateCard = _useCardsContext.updateCard,
      customAmount = _useCardsContext.customAmount,
      updateCustomAmount = _useCardsContext.updateCustomAmount;

  var labels = (0, _lib.useStrings)('checkoutVoucher');
  if (!(cards != null && cards.length)) return null;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Flex, null, cards.map(function (card) {
    return /*#__PURE__*/_react["default"].createElement(Option, {
      onClick: function onClick() {
        return updateCard(card.amount);
      },
      key: "Card__" + card.amount
    }, /*#__PURE__*/_react["default"].createElement(Box, {
      isSelected: cardId === card.amount
    }, card.amount, ",00 ", /*#__PURE__*/_react["default"].createElement("span", null, currency)));
  })), /*#__PURE__*/_react["default"].createElement(CustomAmountContainer, null, /*#__PURE__*/_react["default"].createElement(LabelContainer, {
    style: {
      width: '40.6%'
    }
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "custom-price"
  }, labels.customAmountLabel)), /*#__PURE__*/_react["default"].createElement(InputContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Input, {
    type: "number",
    onChange: function onChange(e) {
      return updateCustomAmount(e.target.value);
    },
    value: customAmount,
    id: "custom-price",
    placeholder: labels.customAmountPlaceholder
  }))));
};

exports.CardSelect = CardSelect;

var Flex = _styledComponents["default"].div.attrs({
  className: 'row row-cols-5 g-1'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var CustomAmountContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex gx-1 align-items-center mt-1'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Box = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'd-block pt-1 px-2 pb-4',
  as: 'span',
  variant: 6
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n\n  border: 0.1rem solid\n    ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  transition: opacity 0.1s ease-in-out, background-color 0.1s ease-in-out,\n    color 0.1s ease-in-out;\n\n  border-radius: 0.6rem;\n  line-height: 1.8rem;\n\n  & > span {\n    font-size: 0.9rem;\n    font-weight: bold;\n    vertical-align: top;\n    line-height: 1.6rem;\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.light;
}, function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary;
}, function (props) {
  return props.isSelected ? props.theme.palette.secondary : props.theme.palette.primary;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

var Option = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var InputContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: calc(100% - calc(40% + var(--bs-gutter-x)));\n"])));

var LabelContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: calc(40% + var(--bs-gutter-x));\n"])));
//# sourceMappingURL=index.js.map