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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

import React from 'react';
import { useLocalLabels, useCheckoutFormPaymentState, useCheckoutFormServerErrors, useCheckoutErrorFields, usePixel } from '@sentecacommerce-theme/lib';
import { CheckoutTitle } from '../UI';
import styled, { css } from 'styled-components';
import { FormError, IconCOD, IconVisa, IconMasterCard } from '../../../Common';
import { Voucher } from './Components';
export var CheckoutPayment = () => {
  var {
    errors,
    isSubmitting,
    isValid,
    paymentMethods
  } = useCheckoutFormPaymentState();
  var {
    pixelCheckoutStep,
    pixelCheckoutStepOption
  } = usePixel();
  var {
    serverErrors
  } = useCheckoutFormServerErrors();
  var {
    errorRef
  } = useCheckoutErrorFields();
  React.useEffect(() => {
    pixelCheckoutStep(2);
  }, []);
  var {
    codLabel,
    boricaLabel,
    paymentTitle
  } = useLocalLabels();
  var paymentsMap = {
    cod: codLabel,
    'cod-gr': codLabel,
    borica: boricaLabel
  };

  var handlePaymentClick = payment => {
    payment.onClick();
    pixelCheckoutStepOption(2, paymentsMap[payment.key]);
  };

  var canSubmit = !isSubmitting || isSubmitting && isValid;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(CheckoutTitle, {
    data: paymentTitle
  }), /*#__PURE__*/React.createElement(Border, null, paymentMethods == null ? void 0 : paymentMethods.map(payment => {
    return /*#__PURE__*/React.createElement(Option, {
      key: "Payment__" + payment.key,
      isSelected: payment.selected,
      onClick: () => handlePaymentClick(payment)
    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Check, {
      isSelected: payment.selected
    }), /*#__PURE__*/React.createElement(Name, null, paymentsMap[payment.key])), /*#__PURE__*/React.createElement(Icon, null, iconsMap[payment.key]));
  }), /*#__PURE__*/React.createElement(Voucher, null)), serverErrors, !canSubmit && /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    errors: errors,
    fieldName: "paymentMethod"
  }));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var Border = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  border-top: 0.1rem solid ", ";\n  border-bottom: 0.1rem solid ", ";\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.hint;
}, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
});
var BoricaIconsContainer = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var iconsMap = {
  cod: /*#__PURE__*/React.createElement(IconCOD, {
    style: {
      width: 'auto',
      height: '4rem'
    }
  }),
  'cod-gr': /*#__PURE__*/React.createElement(IconCOD, {
    style: {
      width: 'auto',
      height: '4rem'
    }
  }),
  borica: /*#__PURE__*/React.createElement(BoricaIconsContainer, null, /*#__PURE__*/React.createElement(IconVisa, {
    style: {
      width: 'auto',
      height: '1.4rem'
    }
  }), /*#__PURE__*/React.createElement(IconMasterCard, {
    style: {
      width: 'auto',
      height: '5rem',
      margin: '-2.6rem 0'
    }
  }))
};
var Name = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Icon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  line-height: 0.8;\n"])));
var Option = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-between py-3',
  tabIndex: 0
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  border-bottom: 0.1rem dashed ", ";\n\n  ", "\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
}, props => props.isSelected ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n          border-color: ", ";\n\n          .Check,\n          .Check:after {\n            border-color: ", ";\n          }\n        "])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n          &:hover {\n            .Check,\n            .Check:after {\n              border-color: ", ";\n            }\n          }\n        "])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
}));
var Flex = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose([""])));
var Check = styled.div.attrs({
  className: 'Check d-flex align-items-center justify-content-center mr-3'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  border: 0.2rem solid\n    ", ";\n  border-radius: 50%;\n  min-width: 2.4rem;\n  max-width: 2.4rem;\n  height: 2.4rem;\n\n  &:after {\n    content: '';\n    border-radius: 50%;\n\n    display: block;\n    width: 1.2rem;\n    height: 1.2rem;\n    background: ", ";\n  }\n"])), props => props.isSelected ? props.theme.palette.primary : props.theme.palette.hint, props => props.isSelected ? props.theme.palette.primary : 'transparent');
//# sourceMappingURL=index.js.map