"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Type = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
var api_1 = __importDefault(require("lib/hooks/api"));
var loading_1 = __importDefault(require("components/share/loading"));
var A_1 = __importDefault(require("components/misc/A"));
var misc_1 = require("@cocalc/util/misc");
var static_markdown_1 = __importDefault(require("@cocalc/frontend/editors/slate/static-markdown"));
var icon_1 = require("@cocalc/frontend/components/icon");
var util_1 = require("./util");
var customize_1 = require("lib/customize");
var config_1 = require("lib/config");
function Tickets() {
    var _a = (0, api_1.default)("support/tickets"), result = _a.result, error = _a.error;
    var zendesk = (0, customize_1.useCustomize)().zendesk;
    if (!zendesk) {
        return (0, jsx_runtime_1.jsx)(util_1.NoZendesk, {});
    }
    return ((0, jsx_runtime_1.jsx)(antd_1.Layout.Content, __assign({ style: {
            backgroundColor: "white",
        } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
                maxWidth: config_1.MAX_WIDTH,
                margin: "15px auto",
                padding: "15px",
                backgroundColor: "white",
                color: "#555",
            } }, { children: [" ", (0, jsx_runtime_1.jsx)("h1", __assign({ style: { textAlign: "center", fontSize: "24pt" } }, { children: "Support Tickets" })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { fontSize: "12pt" } }, { children: ["Check the status of your support tickets here or", " ", (0, jsx_runtime_1.jsx)(A_1.default, __assign({ href: "/support/new" }, { children: "create a new ticket" })), ". Newly created tickets do not appear here for a few minutes."] })), error && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { style: { margin: "30px 0" }, type: "error", message: "Error loading support tickets", description: error })), (0, jsx_runtime_1.jsx)(antd_1.Divider, { children: "Tickets" }), (0, jsx_runtime_1.jsx)("br", {}), result ? ((0, jsx_runtime_1.jsx)(SupportTimeline, { tickets: result.tickets })) : ((0, jsx_runtime_1.jsx)(loading_1.default, { style: { fontSize: "20pt" } }))] })) })));
}
exports.default = Tickets;
function SupportTimeline(_a) {
    var e_1, _b;
    var tickets = _a.tickets;
    var v = [];
    try {
        for (var _c = __values(tickets !== null && tickets !== void 0 ? tickets : []), _d = _c.next(); !_d.done; _d = _c.next()) {
            var ticket = _d.value;
            v.push((0, jsx_runtime_1.jsx)(antd_1.Timeline.Item, __assign({ color: statusToColor(ticket.status) }, { children: (0, jsx_runtime_1.jsx)(Ticket, { ticket: ticket }) }), ticket.id));
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
        }
        finally { if (e_1) throw e_1.error; }
    }
    return (0, jsx_runtime_1.jsx)(antd_1.Timeline, { children: v });
}
var COLOR = {
    new: "orange",
    open: "orange",
    pending: "red",
    solved: "#666",
};
function statusToColor(status) {
    var _a;
    return (_a = COLOR[status]) !== null && _a !== void 0 ? _a : "yellow";
}
function Ticket(_a) {
    var ticket = _a.ticket;
    var id = ticket.id, userURL = ticket.userURL, created_at = ticket.created_at, updated_at = ticket.updated_at, description = ticket.description, status = ticket.status, subject = ticket.subject, type = ticket.type;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { marginBottom: "15px" } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { float: "right" } }, { children: (0, jsx_runtime_1.jsx)(Type, { type: type, status: status }) })), (0, jsx_runtime_1.jsxs)(A_1.default, __assign({ href: userURL }, { children: [(0, jsx_runtime_1.jsx)(Status, { status: status }), (0, jsx_runtime_1.jsx)("b", __assign({ style: { fontSize: "13pt" } }, { children: (0, misc_1.trunc)(subject, 80) }))] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", __assign({ style: { float: "right" } }, { children: (0, jsx_runtime_1.jsx)(antd_1.Tooltip, __assign({ title: "Click to visit Zendesk and see all responses to your support request." }, { children: (0, jsx_runtime_1.jsxs)(A_1.default, __assign({ href: userURL }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "external-link" }), " Ticket: ", id] })) })) })), "(created: ", dateToString(created_at), ", updated: ", dateToString(updated_at), ")", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                    overflow: "auto",
                    maxHeight: "30vh",
                    border: "1px solid lightgrey",
                    padding: "15px",
                    marginTop: "5px",
                    backgroundColor: "#fdfdfd",
                    borderRadius: "3px",
                } }, { children: (0, jsx_runtime_1.jsx)(static_markdown_1.default, { value: description }) }))] })));
}
var STATUS_TIP = {
    pending: "We are waiting for your response.",
    new: "We are looking at your support request but have not responded yet.",
    open: "We are trying to solve your support request.",
    solved: "We consider this support request solved.",
};
function Status(_a) {
    var status = _a.status;
    return ((0, jsx_runtime_1.jsx)(antd_1.Tooltip, __assign({ title: STATUS_TIP[status] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Tag, __assign({ color: statusToColor(status), style: { fontSize: "12pt" } }, { children: (0, misc_1.capitalize)(status) })) })));
}
var TYPE_COLOR = {
    problem: "red",
    question: "blue",
    task: "orange",
};
function Type(_a) {
    var status = _a.status, type = _a.type;
    return ((0, jsx_runtime_1.jsx)(antd_1.Tag, __assign({ color: status == "solved" ? "#666" : TYPE_COLOR[type], style: { fontSize: "12pt" } }, { children: (0, misc_1.capitalize)(type) })));
}
exports.Type = Type;
function dateToString(d) {
    try {
        return new Date(d).toLocaleString();
    }
    catch (_err) {
        return d;
    }
}
//# sourceMappingURL=tickets.js.map