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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled from 'styled-components';
import { useCopyToClipboard, useLocalLabels } from '@sentecacommerce-theme/lib';
import { ProfileElementContainer, ProfileElementInner, ProfileElementWrapper, ProfileElementActionsContainer, ProfileElementContentContainer } from '../../Common';

var Element = (_ref) => {
  var {
    data,
    handleToast
  } = _ref;
  var {
    isCopied,
    handleCopy
  } = useCopyToClipboard(3000);
  var labels = useLocalLabels();

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

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

export var Inner = styled(ProfileElementInner)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  padding-left: 0 !important;\n"])));
export var ActionsContainer = styled(ProfileElementActionsContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  @media (max-width: 768px) {\n    width: 50% !important;\n    margin-bottom: 20px;\n  }\n"])));
export var CampaignSpan = styled.span.attrs({
  className: 'mb-3 p-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
export var Label = styled.span.attrs({
  className: 'd-inline-flex align-items-center'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  & svg {\n    width: 2rem;\n    margin-right: 0.4rem;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
});
export var CTALabel = styled.span.attrs({
  className: 'pt-2 pr-3 pb-2 pl-3'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
}, props => props.isCopied && "\n    background: #111;\n    color: #fff;\n  ");
export { Element };
//# sourceMappingURL=index.js.map