"use strict";

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

exports.__esModule = true;
exports.Element = exports.CTALabel = exports.Label = exports.CampaignSpan = exports.ActionsContainer = exports.Inner = 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 _Common = require("../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var Element = function Element(_ref) {
  var data = _ref.data,
      handleToast = _ref.handleToast;

  var _useCopyToClipboard = (0, _lib.useCopyToClipboard)(3000),
      isCopied = _useCopyToClipboard.isCopied,
      handleCopy = _useCopyToClipboard.handleCopy;

  var labels = (0, _lib.useLocalLabels)();

  var handleClick = function handleClick() {
    handleCopy(data.voucherCode);
    handleToast();
  };

  return /*#__PURE__*/_react["default"].createElement(_Common.ProfileElementContainer, null, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(_Common.ProfileElementWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.ProfileElementContentContainer, null, /*#__PURE__*/_react["default"].createElement(CampaignSpan, null, data.campaign.charAt(0).toUpperCase() + data.campaign.slice(1)), data.amountType === 'relative' && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(Label, null, labels.limit, " "), " ", data.limitValue / 100, ' ', data.limitCurrency), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(Label, null, labels.expiry), " ", data.endDate)), /*#__PURE__*/_react["default"].createElement(ActionsContainer, null, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CTALabel, {
    onClick: handleClick
  }, "-", data.amount / 100, data.amountType === 'relative' ? '%' : data.limitCurrency), /*#__PURE__*/_react["default"].createElement(CTALabel, {
    isCopied: isCopied,
    onClick: handleClick
  }, data.voucherCode))))));
};

exports.Element = Element;
var Inner = (0, _styledComponents["default"])(_Common.ProfileElementInner)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding-left: 0 !important;\n"])));
exports.Inner = Inner;
var ActionsContainer = (0, _styledComponents["default"])(_Common.ProfileElementActionsContainer)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: 768px) {\n    width: 50% !important;\n    margin-bottom: 20px;\n  }\n"])));
exports.ActionsContainer = ActionsContainer;

var CampaignSpan = _styledComponents["default"].span.attrs({
  className: 'mb-3 p-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: inline-block;\n  background: ", ";\n  color: rgba(255, 255, 255, 0.9);\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-align: center;\n  border-radius: 5px;\n  cursor: pointer;\n  z-index: 9;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

exports.CampaignSpan = CampaignSpan;

var Label = _styledComponents["default"].span.attrs({
  className: 'd-inline-flex align-items-center'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-weight: 500;\n  & svg {\n    width: 2rem;\n    margin-right: 0.4rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
});

exports.Label = Label;

var CTALabel = _styledComponents["default"].span.attrs({
  className: 'pt-2 pr-3 pb-2 pl-3'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  font-size: 11px;\n  color: ", ";\n  text-decoration: none;\n  border: 1px solid ", ";\n  font-weight: bold;\n\n  cursor: pointer;\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: -10px;\n    width: 0%;\n    background: ", ";\n    height: 100%;\n    z-index: -1;\n    transition: width 0.3s ease-in-out;\n    transform: skew(-25deg);\n    transform-origin: right;\n  }\n\n  &:hover:after {\n    width: 150%;\n    left: -10px;\n    transform-origin: left;\n  }\n\n  &:hover {\n    color: #fff;\n    transition: all 0.5s ease;\n  }\n\n  :nth-of-type(1) {\n    border-radius: 50px 0 0 50px;\n    border-right: none;\n  }\n\n  :nth-of-type(2) {\n    border-radius: 0px 50px 50px 0;\n  }\n\n  ", "\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isCopied && "\n    background: #111;\n    color: #fff;\n  ";
});

exports.CTALabel = CTALabel;
//# sourceMappingURL=index.js.map