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

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

import React from 'react';
import styled from 'styled-components';
import { useStrings } from '@sentecacommerce-theme/lib';
import { useCardsContext } from '../../checkoutVoucher.context';
import { Typography, Input } from '../../../Common';
export var CardSelect = (_ref) => {
  var {
    currency
  } = _ref;
  var {
    cardId,
    cards,
    updateCard,
    customAmount,
    updateCustomAmount
  } = useCardsContext();
  var labels = useStrings('checkoutVoucher');
  if (!(cards != null && cards.length)) return null;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Flex, null, cards.map(card => {
    return /*#__PURE__*/React.createElement(Option, {
      onClick: () => updateCard(card.amount),
      key: "Card__" + card.amount
    }, /*#__PURE__*/React.createElement(Box, {
      isSelected: cardId === card.amount
    }, card.amount, ",00 ", /*#__PURE__*/React.createElement("span", null, currency)));
  })), /*#__PURE__*/React.createElement(CustomAmountContainer, null, /*#__PURE__*/React.createElement(LabelContainer, {
    style: {
      width: '40.6%'
    }
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "custom-price"
  }, labels.customAmountLabel)), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, {
    type: "number",
    onChange: e => updateCustomAmount(e.target.value),
    value: customAmount,
    id: "custom-price",
    placeholder: labels.customAmountPlaceholder
  }))));
};
var Flex = styled.div.attrs({
  className: 'row row-cols-5 g-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var CustomAmountContainer = styled.div.attrs({
  className: 'd-flex gx-1 align-items-center mt-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Box = styled(Typography).attrs({
  className: 'd-block pt-1 px-2 pb-4',
  as: 'span',
  variant: 6
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), props => props.isSelected ? props.theme.palette.primary : props.theme.palette.light, props => props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary, props => props.isSelected ? props.theme.palette.secondary : props.theme.palette.primary, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var Option = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var InputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  width: calc(100% - calc(40% + var(--bs-gutter-x)));\n"])));
var LabelContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  min-width: calc(40% + var(--bs-gutter-x));\n"])));
//# sourceMappingURL=index.js.map