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

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 Link from "../../../ui/Link";
import IconButton from "../../../ui/next/IconButton";
import Collapse from "../../../ui/Collapse";
import Target from "../../../ui/Icon/Target";
import ChevronRight from "../../../ui/Icon/ChevronRight";
import styled from "../../../ui/styles/styled";

function GoalSummary(_ref) {
  var translations = _ref.translations,
      goalInfo = _ref.goalInfo,
      goToStep = _ref.goToStep;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var commaSeparatedList = function commaSeparatedList(list) {
    return list.join(", ").replace(/(.*)\,/gm, "$1 ".concat(translations.connector));
  };

  var description = translations.description.replace("{business_name}", "<b>".concat(goalInfo.business_name, "</b>")).replace("{domain}", "<b>".concat(goalInfo.domain, "</b>")).replace("{gender}", "<b>".concat(translations.gender[goalInfo.gender], "</b>")).replace("{from_age}", "<b>".concat(goalInfo.from_age, "</b>")).replace("{to_age}", "<b>".concat(goalInfo.to_age, "</b>")).replace("{interest_list}", "<b>".concat(commaSeparatedList(goalInfo.audiences.map(function (_ref2) {
    var name = _ref2.name;
    return name;
  })), "</b>")).replace("{locations}", "<b>".concat(commaSeparatedList(goalInfo.locations.map(function (_ref3) {
    var name = _ref3.name;
    return name;
  })), "</b>")).replace("{daily_budget}", "<b>".concat(goalInfo.daily_budget, "$</b>"));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm",
    mt: "xl",
    mb: "sm"
  }, /*#__PURE__*/React.createElement(Target, {
    color: "primary"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800
  }, translations.title), /*#__PURE__*/React.createElement(StyledLink, {
    onClick: function onClick() {
      return goToStep("goal");
    }
  }, translations.update_button), /*#__PURE__*/React.createElement(Trigger, {
    icon: /*#__PURE__*/React.createElement(ChevronRight, null),
    onClick: function onClick() {
      return setOpen(!open);
    },
    "data-open": open
  })), /*#__PURE__*/React.createElement(StyledCollapse, {
    open: open
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "md",
    mt: "sm"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "paragraph",
    dangerouslySetInnerHTML: {
      __html: description
    }
  }))));
}

var StyledLink = styled(Link)(function (_ref4) {
  var theme = _ref4.theme;
  return _objectSpread(_objectSpread({}, theme.typography.variants.small), {}, {
    textDecoration: "underline"
  });
});
var Trigger = styled(IconButton)(function (_ref5) {
  var theme = _ref5.theme;
  return {
    marginLeft: "auto",
    transitionDuration: theme.transitions.duration["short"],
    transitionProperty: "transform",
    "&[data-open=\"true\"]": {
      transform: "rotate(90deg)"
    }
  };
});
var StyledCollapse = styled(Collapse)(function (_ref6) {
  var theme = _ref6.theme;
  return {
    paddingBottom: theme.spaces.lg,
    borderBottom: "1px solid ".concat(theme.colors.neutral[200])
  };
});
export default GoalSummary;