"use strict";

require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MyAccountPage = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.promise.js");
var _react = _interopRequireWildcard(require("react"));
var _samples = require("../samples");
var _utils = require("../utils");
var _reactCollapsed = _interopRequireDefault(require("react-collapsed"));
var _svgs = require("../svgs");
require("./Pages.css");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const MyAccountPage = _ref => {
  let {
    movements,
    faqs
  } = _ref;
  const [activeMenu, setActiveMenu] = (0, _react.useState)();
  const [content, setContent] = (0, _react.useState)( /*#__PURE__*/_react.default.createElement("h1", {
    style: {
      margin: "auto"
    }
  }, "\xA1Bienvenid@ a tu cuenta!"));
  const movsToDraw = movements ? movements : _samples.movs;
  const movsToDrawFiltered = movsToDraw.filter(mov => mov.data.length > 0);
  const faqsToDraw = faqs ? faqs : _samples.movs2;
  const buildMovements = async () => {
    await setActiveMenu("movements");
    if (!movsToDrawFiltered) return;
    await setContent(movsToDrawFiltered.map((movement, k) => /*#__PURE__*/_react.default.createElement(MovementsCard, _extends({
      key: k
    }, movement))));
  };
  const buildHelp = async () => {
    await setActiveMenu("help");
    if (!faqsToDraw) return;
    await setContent(faqsToDraw.map((block, k) => /*#__PURE__*/_react.default.createElement(FaqsCard, _extends({
      key: k
    }, block))));
  };
  const klass = function klass(opt) {
    let res = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "my-account-page-sidebar-opt";
    if (activeMenu === opt) res += " my-account-page-selected";
    return res;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "my-account-page-container"
  }, activeMenu === "help" ? /*#__PURE__*/_react.default.createElement("div", {
    className: "my-account-page-help-selected"
  }, /*#__PURE__*/_react.default.createElement(_svgs.CallCenterIcon, null), "Comun\xEDcate con nosotros al: ", /*#__PURE__*/_react.default.createElement("strong", null, "55 5269 5000")) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: "my-account-page-title-main"
  }, "Mi cuenta"), /*#__PURE__*/_react.default.createElement("div", {
    className: "my-account-page-content"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "my-account-page-sidebar"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: klass("movements"),
    onClick: () => buildMovements()
  }, "Movimientos de tus puntos"), /*#__PURE__*/_react.default.createElement("div", {
    className: klass("help"),
    onClick: () => buildHelp()
  }, "Ayuda")), /*#__PURE__*/_react.default.createElement("div", {
    className: "my-account-page-active-menu"
  }, content)));
};
exports.MyAccountPage = MyAccountPage;
const FaqsCard = _ref2 => {
  let {
    title,
    data
  } = _ref2;
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    className: "coalition-faq-block-name"
  }, title), data.map(_ref3 => {
    let {
      question,
      answer
    } = _ref3;
    return /*#__PURE__*/_react.default.createElement(FaqRow, {
      question: question,
      answer: answer,
      key: (0, _utils.makeId)(7)
    });
  }));
};
const FaqRow = _ref4 => {
  let {
    question,
    answer
  } = _ref4;
  const {
    getCollapseProps,
    getToggleProps,
    isExpanded
  } = (0, _reactCollapsed.default)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "coalition-faq-block-content"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "collapsible"
  }, /*#__PURE__*/_react.default.createElement("div", _extends({
    className: isExpanded ? "collapsible-open header" : "collapsible-closed header"
  }, getToggleProps()), /*#__PURE__*/_react.default.createElement("label", {
    className: "question-from-faqs"
  }, question), /*#__PURE__*/_react.default.createElement("span", null, isExpanded ? /*#__PURE__*/_react.default.createElement(_svgs.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_svgs.ChevronDown, null))), /*#__PURE__*/_react.default.createElement("div", getCollapseProps(), /*#__PURE__*/_react.default.createElement("div", {
    className: "content",
    style: {
      whiteSpace: "pre-wrap"
    }
  }, answer))));
};
const MovementsCard = _ref5 => {
  let {
    title,
    data
  } = _ref5;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-card"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-card-date"
  }, Titlelize(title)), data.map((info, i) => /*#__PURE__*/_react.default.createElement(Row, _extends({
    key: i
  }, info))));
};
const Row = _ref6 => {
  let {
    sponsor_name,
    location_name,
    brand_image,
    bits,
    is_accrual,
    transaction_id,
    transaction_date,
    transaction_type
  } = _ref6;
  const formatted = new Date(transaction_date).toLocaleDateString("es-mx", {
    weekday: "long",
    // year: "numeric",
    // month: "long",
    day: "numeric"
  });
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-logo-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-logo"
  }, /*#__PURE__*/_react.default.createElement("img", {
    src: brand_image,
    alt: "logo"
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-details-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-details"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-details-title"
  }, sponsor_name), /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-details-description"
  }, Titlelize(formatted)))), /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-ammount-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "movement-ammount"
  }, /*#__PURE__*/_react.default.createElement("label", {
    style: {
      color: "#4a90e2"
    }
  }, is_accrual ? "+" : "-"), " ", Math.floor(bits)))));
};
const Titlelize = str => str.charAt(0).toUpperCase() + str.slice(1);