import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useState } from "react";
import CssFlex from "../../ui/CssFlex";
import Typography from "../../ui/Typography";
import RoundedSwitch from "../../ui/RoundedSwitch";
import Box from "../../ui/Box";
import styled from "../../ui/styles/styled";
import YearlySaveEn from "./assets/YearlySave";
import YearlySaveEs from "./assets/YearlySaveEs";

var PMAXPremiumPlans = function PMAXPremiumPlans(_ref) {
  var translations = _ref.translations,
      _ref$locale = _ref.locale,
      locale = _ref$locale === void 0 ? "en" : _ref$locale,
      discount = _ref.discount,
      _ref$defaultYearly = _ref.defaultYearly,
      defaultYearly = _ref$defaultYearly === void 0 ? true : _ref$defaultYearly,
      FooterContent = _ref.FooterContent,
      _ref$hideSwitchImg = _ref.hideSwitchImg,
      hideSwitchImg = _ref$hideSwitchImg === void 0 ? false : _ref$hideSwitchImg,
      children = _ref.children;

  var _useState = useState(defaultYearly),
      _useState2 = _slicedToArray(_useState, 2),
      yearly = _useState2[0],
      setYearly = _useState2[1];

  var priceLabel = yearly ? translations.tabs.yearly.period : translations.tabs.monthly.period;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Typography, {
    component: "h2",
    variant: "title",
    shade: 800,
    align: "center"
  }, translations.title), /*#__PURE__*/React.createElement(Typography, {
    variant: "paragraph",
    align: "center",
    sx: {
      mt: "md",
      mb: "lg"
    }
  }, translations.description), discount &&
  /*#__PURE__*/
  // @ts-ignore
  React.createElement(PromotionCard, {
    direction: "column",
    alignItems: "center",
    gap: "sm",
    mb: "2xl"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "caption",
    color: "inherit",
    weight: "bold"
  }, translations.launch_offer.title), /*#__PURE__*/React.createElement(Typography, {
    variant: "title",
    color: "inherit",
    dangerouslySetInnerHTML: {
      __html: translations.launch_offer.description.replace("{percentage}", String(discount * 100))
    }
  })), /*#__PURE__*/React.createElement(SwitchContainer, null, /*#__PURE__*/React.createElement(StyledSwitch, {
    checked: yearly,
    options: [translations.tabs.monthly.title, translations.tabs.yearly.title],
    color: "primary",
    onChange: function onChange(ev) {
      return setYearly(ev.target.checked);
    }
  }), !hideSwitchImg && /*#__PURE__*/React.createElement(React.Fragment, null, locale === "es" ? /*#__PURE__*/React.createElement(YearlySaveEs, null) : /*#__PURE__*/React.createElement(YearlySaveEn, null))), typeof children === "function" ? children({
    discount: discount,
    yearly: yearly,
    priceLabel: priceLabel
  }) : children, /*#__PURE__*/React.createElement(Box, {
    mt: ["lg", "xl", "2xl"]
  }, FooterContent || null, /*#__PURE__*/React.createElement(StyledTypography, {
    variant: "small",
    shade: 400,
    align: "center",
    dangerouslySetInnerHTML: {
      __html: translations.terms_and_conditions
    }
  })));
};

var Container = styled.div(function (_ref2) {
  var theme = _ref2.theme;
  return {
    width: "100%",
    boxSizing: "border-box",
    marginLeft: "auto",
    marginRight: "auto",
    // padding: `${theme.spaces["3xl"]} min(${theme.spaces["2xl"]}, 10%) ${theme.spaces.lg}`,
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  };
});
var PromotionCard = styled(CssFlex)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    backgroundColor: theme.colors.danger[50],
    color: theme.colors.danger[500],
    border: "2px solid ".concat(theme.colors.danger[500]),
    padding: "12px 24px",
    borderRadius: theme.borderRadius.normal,
    boxSizing: "border-box"
  };
});
var SwitchContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0 auto;\n  margin-bottom: 24px;\n  display: flex;\n\n  & > svg {\n    max-width: 300px;\n    position: absolute;\n    top: 8px;\n    right: 0;\n    transform: translateX(100%);\n\n    ", " {\n      max-width: 200px;\n      top: 0;\n    }\n    ", " {\n      display: none;\n      appearance: none;\n    }\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.down("md");
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.down("sm");
});
var StyledSwitch = styled(RoundedSwitch)(function (_ref6) {
  var theme = _ref6.theme;
  return _objectSpread(_objectSpread({
    color: theme.colors.neutral[500]
  }, theme.typography.variants.inputText), {}, {
    borderRadius: theme.borderRadius.normal,
    width: "220px",
    lineHeight: 1,
    "& > div[data-side='selector']": {
      color: theme.colors.primary[500],
      backgroundColor: theme.colors.neutral[50],
      borderRadius: theme.borderRadius.normal,
      padding: "calc(".concat(theme.spaces.md, " - 3px)"),
      height: "calc(100% - 6px)",
      margin: "3px",
      width: "107px",
      "& > p": {
        fontSize: "inherit"
      }
    },
    "& > div[data-side='left'], & > div[data-side='right']": {
      padding: "calc(".concat(theme.spaces.md, " + 2px)")
    }
  });
});
var StyledTypography = styled(Typography)(function (_ref7) {
  var theme = _ref7.theme;
  return {
    margin: "auto",
    "& a": {
      color: "inherit",
      textDecoration: "underline",
      "&:hover, &:focus": {
        color: theme.colors.neutral[500]
      }
    }
  };
});
export default PMAXPremiumPlans;