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

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

import React from 'react';
import styled from 'styled-components';
import { CheckoutVoucherContextProvider } from './checkoutVoucher.context';
import { FormBottom, CardPreview, ImageSelect, CardSelect, RecipientFields } from './Components';
import { Typography } from '../Common';
import { useUpdateStrings } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';

var findStyleById = (cardStyles, id) => {
  return cardStyles.find(style => style.id === id);
};

export var CheckoutVoucher = props => {
  var {
    defaultSelectedStyleId,
    cardStyles,
    priceCurrency,
    defaultSelectedCardId,
    labels,
    hasOptionalMessage,
    hasRecipientDetails,
    cards
  } = props;
  useUpdateStrings('checkoutVoucher', labels);
  var router = useRouter();
  var {
    style: queryStyle
  } = router.query;

  var getDefaultStyle = () => findStyleById(cardStyles, defaultSelectedStyleId) || cardStyles[0];

  var getQueryStyle = () => {
    if (!queryStyle) return getDefaultStyle();
    return findStyleById(cardStyles, queryStyle) || getDefaultStyle();
  };

  return /*#__PURE__*/React.createElement(CheckoutVoucherContextProvider, {
    defaultSelectedCardId: defaultSelectedCardId,
    defaultSelectedStyle: queryStyle ? getQueryStyle() : getDefaultStyle(),
    cardStyles: cardStyles,
    cards: cards
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Left, null, /*#__PURE__*/React.createElement(CardPreview, null)), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Subtitle, null, labels == null ? void 0 : labels.subtitle), /*#__PURE__*/React.createElement(Title, null, labels == null ? void 0 : labels.title), /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Label, null, labels.chooseStyle), /*#__PURE__*/React.createElement(ImageSelect, null)), /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Label, null, labels.chooseAmount), /*#__PURE__*/React.createElement(CardSelect, {
    currency: priceCurrency
  })), hasRecipientDetails && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Section, {
    withBorder: true
  }, /*#__PURE__*/React.createElement(Label, null, labels.recipientFormLabel), /*#__PURE__*/React.createElement(RecipientFields, null))), hasOptionalMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Section, {
    withBorder: true
  }, /*#__PURE__*/React.createElement(Label, null, labels.optionalMessageInput))), /*#__PURE__*/React.createElement(FormBottom, null), /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Label, null, labels == null ? void 0 : labels.bottomText))))));
};
var Container = styled.div.attrs({
  className: 'container mt-5'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Flex = styled.div.attrs({
  className: 'row g-4 gx-5'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Left = styled.div.attrs({
  className: 'col-12 col-md-6 col-lg-8'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Right = styled.div.attrs({
  className: 'col-12 col-md-6 col-lg-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Label = styled.p.attrs({
  className: 'mb-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Section = styled.div.attrs(props => ({
  className: props.withBorder ? 'mt-4 pt-3' : 'mt-4'
}))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  border-top: ", ";\n"])), props => props.withBorder ? "0.1rem solid " + props.theme.palette.light : '0');
var Subtitle = styled(Typography).attrs({
  as: 'h2',
  variant: 5
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var Title = styled(Typography).attrs({
  as: 'h1',
  variant: 3
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=checkoutVoucher.component.js.map