"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IncidentDetails = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactHookForm = require("react-hook-form");

var _dayjs = _interopRequireDefault(require("dayjs"));

var _IncidentDetailsRow = require("./IncidentDetailsRow");

var _Select = require("../Select");

var _incidentPriority = require("../../constants/incident-priority");

var _selectComponents = require("./select-components");

var _data = require("./data");

var _jsxRuntime = require("react/jsx-runtime");

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; }

var IncidentDetails = function IncidentDetails(_ref) {
  var _incident$severity, _respondersArray$;

  var incident = _ref.incident,
      updateStatusHandler = _ref.updateStatusHandler,
      updateIncidentHandler = _ref.updateIncidentHandler,
      textButton = _ref.textButton;
  // Temporary mock, in the future you need to replace it with an array of real users received from the api
  var commandersArray = (0, _react.useMemo)(function () {
    return [{
      label: incident.commander_id.name,
      value: incident.commander_id.id,
      avatar: incident.commander_id.avatar
    }];
  }, [incident]);
  var respondersArray = (0, _react.useMemo)(function () {
    return incident.responder.map(function (item, index) {
      return {
        label: item.created_by.name,
        value: "".concat(index),
        avatar: item.created_by.avatar
      };
    });
  }, [incident]);

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: {
      tracking: "123456",
      created_at: incident.created_at,
      chartRoomTitle: "#Slack",
      chartRoom: "https://google.com.ua",
      statusPageTitle: "StatusPage.io",
      statusPage: "https://www.atlassian.com/software/statuspage",
      priority: (_incident$severity = incident.severity) !== null && _incident$severity !== void 0 ? _incident$severity : _incidentPriority.IncidentPriority.High,
      commanders: incident.commander_id.id,
      respondents: (respondersArray === null || respondersArray === void 0 ? void 0 : (_respondersArray$ = respondersArray[0]) === null || _respondersArray$ === void 0 ? void 0 : _respondersArray$.value) || null
    }
  }),
      control = _useForm.control,
      watch = _useForm.watch;

  watch();
  var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";

  var formatDate = function formatDate(_ref2) {
    var date = _ref2.date,
        _ref2$format = _ref2.format,
        format = _ref2$format === void 0 ? DATE_FORMAT : _ref2$format,
        _ref2$fallback = _ref2.fallback,
        fallback = _ref2$fallback === void 0 ? "-" : _ref2$fallback;
    return date ? (0, _dayjs.default)(date).format(format) : fallback;
  };

  var dateToDuration = function dateToDuration(_ref3) {
    var date = _ref3.date,
        _ref3$withoutSuffix = _ref3.withoutSuffix,
        withoutSuffix = _ref3$withoutSuffix === void 0 ? true : _ref3$withoutSuffix,
        _ref3$fallback = _ref3.fallback,
        fallback = _ref3$fallback === void 0 ? "-" : _ref3$fallback;
    return date ? (0, _dayjs.default)(date).fromNow(withoutSuffix) : fallback;
  };

  var watchCreatedAt = watch("created_at");
  var formattedCreatedAt = (0, _react.useMemo)(function () {
    return formatDate({
      date: watchCreatedAt
    });
  }, [watchCreatedAt]);
  var formattedDuration = (0, _react.useMemo)(function () {
    return dateToDuration({
      date: watchCreatedAt
    });
  }, [watchCreatedAt]);
  (0, _react.useEffect)(function () {
    var subscription = watch(function (_ref4) {
      var priority = _ref4.priority;
      updateIncidentHandler({
        severity: priority
      });
    });
    return function () {
      return subscription.unsubscribe();
    };
  }, [watch, updateIncidentHandler]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "px-6 pt-3.5",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "flex justify-between mb-7",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
        className: "mt-0.5 text-2xl font-medium leading-7 text-dark-gray",
        children: "Details"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        type: "button",
        className: "btn-secondary btn-secondary-sm text-dark-blue",
        children: "Share"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IncidentDetailsRow.IncidentDetailsRow, {
      title: "Respondents",
      className: "mt-2.5",
      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
        name: "respondents",
        control: control,
        hideSelectedOptions: false,
        components: {
          MultiValueLabel: _selectComponents.IncidentRespondentsMultiValueLabel,
          Option: _selectComponents.IncidentRespondentsOption,
          IndicatorSeparator: function IndicatorSeparator() {
            return null;
          },
          MultiValueRemove: function MultiValueRemove() {
            return null;
          },
          ClearIndicator: function ClearIndicator() {
            return null;
          }
        },
        styles: {
          multiValue: function multiValue() {
            return {
              marginLeft: -4
            };
          }
        },
        options: respondersArray,
        isMulti: true
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IncidentDetailsRow.IncidentDetailsRow, {
      title: "Commanders",
      className: "mt-4",
      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
        name: "commanders",
        isClearable: true,
        control: control,
        hideSelectedOptions: false,
        components: {
          SingleValue: _selectComponents.IncidentCommandersSingleValue,
          Option: _selectComponents.IncidentCommandersOption,
          IndicatorSeparator: function IndicatorSeparator() {
            return null;
          }
        },
        options: commandersArray
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IncidentDetailsRow.IncidentDetailsRow, {
      title: "Started",
      className: "mt-2.5",
      value: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "text-dark-gray text-sm font-normal",
        children: formattedCreatedAt
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IncidentDetailsRow.IncidentDetailsRow, {
      title: "Duration",
      className: "mt-2.5",
      value: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "text-dark-gray text-sm font-normal",
        children: formattedDuration
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IncidentDetailsRow.IncidentDetailsRow, {
      title: "Priority",
      className: "mt-3",
      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
        name: "priority",
        control: control,
        components: {
          SingleValue: _selectComponents.IncidentPrioritySingleValue,
          Option: _selectComponents.IncidentPriorityOption,
          IndicatorSeparator: function IndicatorSeparator() {
            return null;
          }
        },
        options: _data.priorities,
        isSearchable: false
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      type: "button",
      className: "btn-primary mt-6 w-full mb-10",
      onClick: updateStatusHandler,
      children: textButton
    })]
  });
};

exports.IncidentDetails = IncidentDetails;