"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Type = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const antd_1 = require("antd");
const api_1 = __importDefault(require("lib/hooks/api"));
const loading_1 = __importDefault(require("components/share/loading"));
const A_1 = __importDefault(require("components/misc/A"));
const misc_1 = require("@cocalc/util/misc");
const static_markdown_1 = __importDefault(require("@cocalc/frontend/editors/slate/static-markdown"));
const icon_1 = require("@cocalc/frontend/components/icon");
const util_1 = require("./util");
const customize_1 = require("lib/customize");
const config_1 = require("lib/config");
function Tickets() {
    let { result, error } = (0, api_1.default)("support/tickets");
    const { zendesk } = (0, customize_1.useCustomize)();
    if (!zendesk) {
        return (0, jsx_runtime_1.jsx)(util_1.NoZendesk, {});
    }
    return ((0, jsx_runtime_1.jsx)(antd_1.Layout.Content, { style: {
            backgroundColor: "white",
        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                maxWidth: config_1.MAX_WIDTH,
                margin: "15px auto",
                padding: "15px",
                backgroundColor: "white",
                color: "#555",
            }, children: [" ", (0, jsx_runtime_1.jsx)("h1", { style: { textAlign: "center", fontSize: "24pt" }, children: "Support Tickets" }), (0, jsx_runtime_1.jsxs)("p", { style: { fontSize: "12pt" }, children: ["Check the status of your support tickets here or", " ", (0, jsx_runtime_1.jsx)(A_1.default, { 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({ tickets }) {
    const v = [];
    for (const ticket of tickets ?? []) {
        v.push((0, jsx_runtime_1.jsx)(antd_1.Timeline.Item, { color: statusToColor(ticket.status), children: (0, jsx_runtime_1.jsx)(Ticket, { ticket: ticket }) }, ticket.id));
    }
    return (0, jsx_runtime_1.jsx)(antd_1.Timeline, { children: v });
}
const COLOR = {
    new: "orange",
    open: "orange",
    pending: "red",
    solved: "#666",
};
function statusToColor(status) {
    return COLOR[status] ?? "#f5ca00";
}
function Ticket({ ticket }) {
    const { id, userURL, created_at, updated_at, description, status, subject, type, } = ticket;
    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { float: "right" }, children: (0, jsx_runtime_1.jsx)(Type, { type: type, status: status }) }), (0, jsx_runtime_1.jsxs)(A_1.default, { href: userURL, children: [(0, jsx_runtime_1.jsx)(Status, { status: status }), (0, jsx_runtime_1.jsx)("b", { style: { fontSize: "13pt" }, children: (0, misc_1.trunc)(subject, 80) })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: { float: "right" }, children: (0, jsx_runtime_1.jsx)(antd_1.Tooltip, { title: "Click to visit Zendesk and see all responses to your support request.", children: (0, jsx_runtime_1.jsxs)(A_1.default, { 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", { 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 }) })] }));
}
const STATUS = {
    pending: {
        title: "We are waiting for your response.",
        label: "AWAITING YOUR REPLY",
        color: "#f5ca00",
    },
    new: {
        title: "We are looking at your support request but have not responded yet.",
        label: "NEW",
        color: "#59bbe0" /* blue */,
    },
    open: {
        title: "We are trying to solve your support request.",
        label: "OPEN",
        color: "#59bbe0",
    },
    solved: {
        title: "This support request has been solved.",
        label: "SOLVED",
        color: "#666",
    },
};
function Status({ status }) {
    const { title, label, color } = STATUS[status] ?? {
        title: "",
        label: "Status",
        color: "blue",
    };
    return ((0, jsx_runtime_1.jsx)(antd_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(antd_1.Tag, { color: color, style: { fontSize: "12pt", color: "white" }, children: label }) }));
}
const TYPE_COLOR = {
    problem: "red",
    question: "blue",
    task: "orange",
};
function Type({ status, type, }) {
    return ((0, jsx_runtime_1.jsx)(antd_1.Tag, { 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