import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import styled from "../../../ui/styles/styled";

function applyDiscount(value, discount) {
  var valueDiscounted = (value * (1 - discount)).toFixed(1); // Only keep one decimal

  return Number(valueDiscounted); // Re-cast string to number to remove strings like "50.0"
}

function PremiumPrice(props) {
  var _props$component = props.component,
      component = _props$component === void 0 ? "h2" : _props$component,
      value = props.value,
      currency = props.currency,
      label = props.label,
      discount = props.discount;
  var currentPrice = typeof discount === "number" ? applyDiscount(value, discount) : value;
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(Container, null, /*#__PURE__*/React.createElement(PriceContainer, null, /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "baseline"
    }, /*#__PURE__*/React.createElement(Typography, {
      component: "span",
      shade: 900,
      weight: "bold"
    }, currency), /*#__PURE__*/React.createElement(Price, {
      component: component,
      variant: "title",
      weight: "bold",
      shade: 900
    }, currentPrice)), /*#__PURE__*/React.createElement(Typography, {
      className: "oldPrice",
      variant: "paragraph",
      shade: 400,
      color: "neutral"
    }, discount ? /*#__PURE__*/React.createElement(Deleted, null, currency, value) : null, label)))
  );
}

var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  container: pricetag / inline-size;\n"])));
var PriceContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: baseline;\n\n  @container pricetag (max-width: 280px) {\n    flex-direction: column;\n    .oldPrice {\n      padding-left: 1.5ch;\n    }\n  }\n"])));
var Deleted = styled.del(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  position: relative;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    border-top: 2px solid ", ";\n    transform: rotate(-20deg);\n  }\n"])), function (props) {
  return props.theme.colors.danger[500];
});
var Price = styled(Typography)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 48px;\n"])));
export default PremiumPrice;