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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useToasts } from 'react-toast-notifications';
import { Typography } from '../../../Common/Typography';
import { usePromoCode, useGlobalLabels } from '@sentecacommerce-theme/lib';
export var VouchersCTA = (_ref) => {
  var {
    mobile,
    labels
  } = _ref;
  var {
    hasActiveVoucher,
    activateVoucher,
    voucherName
  } = usePromoCode();
  var {
    toastNotifications
  } = useGlobalLabels();
  var {
    addToast
  } = useToasts();

  var handleClick = () => {
    var _toastNotifications$s;

    activateVoucher();
    addToast(toastNotifications == null ? void 0 : (_toastNotifications$s = toastNotifications.success) == null ? void 0 : _toastNotifications$s.activatedVoucher, {
      appearance: 'success',
      autoDismiss: true
    });
  };

  return /*#__PURE__*/React.createElement(Container, {
    mobile: mobile,
    isActive: !hasActiveVoucher
  }, /*#__PURE__*/React.createElement(ContentWrapper, {
    as: "div",
    variant: "7",
    isActive: !hasActiveVoucher
  }, /*#__PURE__*/React.createElement(Label, null, labels.label), /*#__PURE__*/React.createElement(CTA, null, voucherName), ' ', /*#__PURE__*/React.createElement(Label, {
    isLink: true,
    onClick: handleClick
  }, labels.activate)));
};
var Container = styled.div.attrs(props => {
  return {
    className: "container-fluid " + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 4.5rem;\n  min-height: 4.5rem;\n  ", "\n  padding: 0.8rem 0;\n  /* box-shadow: inset 0 -1px 0 0 ", "; */\n  position: relative;\n  background: ", ";\n  overflow: hidden;\n  align-items: center;\n  max-width: none;\n  min-width: 100vw;\n  margin-top: ", " !important;\n  transition: all 0.3s;\n"])), (_ref2) => {
  var {
    isActive
  } = _ref2;
  return !isActive && "\n  min-height: 0;\n  height: 0;\n  padding: 0 !important;\n  ";
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.light;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, (_ref5) => {
  var {
    mobile
  } = _ref5;
  return mobile ? "6rem" : '0';
});
var ContentWrapper = styled(Typography)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  opacity: ", ";\n  font-size: 1.3rem;\n  line-height: 1.4rem;\n  transition: opacity 0.4s ease;\n\n  min-width: 100%;\n  color: ", ";\n  text-align: center;\n\n  @media (min-width: ", ") {\n    font-size: 1.5rem;\n  }\n"])), props => props.isActive ? '1' : '0', (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.secondary;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
var Label = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  width: fit-content;\n  ", "\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.secondary;
}, props => props.isLink && "\n  font-weight: 700;\n  cursor: pointer;\n  text-decoration: underline;\n  ");
var CTA = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  font-weight: 700;\n  color: ", ";\n  width: fit-content;\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map