"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/*
The "Saved for Later" section below the shopping cart.
*/
const react_1 = require("react");
const api_1 = __importDefault(require("lib/hooks/api"));
const post_1 = __importDefault(require("lib/api/post"));
const mounted_1 = __importDefault(require("lib/hooks/mounted"));
const antd_1 = require("antd");
const site_license_cost_1 = require("./site-license-cost");
const compute_cost_1 = require("./compute-cost");
const loading_1 = __importDefault(require("components/share/loading"));
const icon_1 = require("@cocalc/frontend/components/icon");
const misc_1 = require("@cocalc/util/misc");
function OtherItems({ onChange, cart }) {
    const [tab, setTab] = (0, react_1.useState)("saved-for-later");
    const [search, setSearch] = (0, react_1.useState)("");
    const items = [
        { label: "Saved For Later", key: "saved-for-later" },
        { label: "Buy It Again", key: "buy-it-again" },
    ];
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, { sm: 18, xs: 24, children: (0, jsx_runtime_1.jsx)(antd_1.Menu, { selectedKeys: [tab], mode: "horizontal", onSelect: (e) => {
                                setTab(e.keyPath[0]);
                            }, items: items }) }), (0, jsx_runtime_1.jsx)(antd_1.Col, { sm: 6, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                height: "100%",
                                borderBottom: "1px solid #eee" /* hack to match menu */,
                                display: "flex",
                                flexDirection: "column",
                                alignContent: "center",
                                justifyContent: "center",
                                paddingRight: "5px",
                            }, children: (0, jsx_runtime_1.jsx)(antd_1.Input.Search, { style: { width: "100%" }, placeholder: "Search...", value: search, onChange: (e) => setSearch(e.target.value) }) }) })] }), (0, jsx_runtime_1.jsx)(Items, { onChange: onChange, cart: cart, tab: tab, search: search.toLowerCase() })] }));
}
exports.default = OtherItems;
function Items({ onChange, cart, tab, search }) {
    const isMounted = (0, mounted_1.default)();
    const [updating, setUpdating] = (0, react_1.useState)(false);
    const get = (0, api_1.default)("/shopping/cart/get", tab == "buy-it-again" ? { purchased: true } : { removed: true });
    const items = (0, react_1.useMemo)(() => {
        if (!get.result)
            return undefined;
        const x = [];
        const v = (0, misc_1.search_split)(search);
        for (const item of get.result) {
            if (search && !(0, misc_1.search_match)(JSON.stringify(item).toLowerCase(), v))
                continue;
            item.cost = (0, compute_cost_1.computeCost)(item.description);
            x.push(item);
        }
        return x;
    }, [get.result, search]);
    (0, react_1.useEffect)(() => {
        get.call();
    }, [cart.result]);
    if (get.error) {
        return (0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "error", message: get.error });
    }
    if (get.result == null || items == null) {
        return (0, jsx_runtime_1.jsx)(loading_1.default, { center: true });
    }
    async function reload() {
        if (!isMounted.current)
            return;
        setUpdating(true);
        try {
            await get.call();
        }
        finally {
            if (isMounted.current) {
                setUpdating(false);
            }
        }
    }
    if (items.length == 0) {
        return ((0, jsx_runtime_1.jsx)("div", { style: { padding: "15px", textAlign: "center", fontSize: "10pt" }, children: tab == "buy-it-again"
                ? `No ${search ? "matching" : ""} previously purchased items.`
                : `No ${search ? "matching" : ""} items saved for later.` }));
    }
    const columns = [
        {
            responsive: ["xs"],
            render: ({ id, cost, description }) => {
                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(DescriptionColumn, { ...{
                                id,
                                cost,
                                description,
                                updating,
                                setUpdating,
                                isMounted,
                                reload,
                                onChange,
                                tab,
                            } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("b", { style: { fontSize: "11pt" }, children: (0, jsx_runtime_1.jsx)(site_license_cost_1.DisplayCost, { cost: cost, simple: true, oneLine: true }) }) })] }));
            },
        },
        {
            responsive: ["sm"],
            title: "Product",
            align: "center",
            render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { color: "darkblue" }, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "key", style: { fontSize: "24px" } }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10pt" }, children: "Site License" })] })),
        },
        {
            responsive: ["sm"],
            width: "60%",
            render: (_, { id, cost, description }) => ((0, jsx_runtime_1.jsx)(DescriptionColumn, { ...{
                    id,
                    cost,
                    description,
                    updating,
                    setUpdating,
                    isMounted,
                    onChange,
                    reload,
                    tab,
                } })),
        },
        {
            responsive: ["sm"],
            title: "Price",
            align: "right",
            render: (_, { cost }) => ((0, jsx_runtime_1.jsx)("b", { style: { fontSize: "11pt" }, children: (0, jsx_runtime_1.jsx)(site_license_cost_1.DisplayCost, { cost: cost, simple: true }) })),
        },
    ];
    return ((0, jsx_runtime_1.jsx)(antd_1.Table, { showHeader: false, columns: columns, dataSource: items, rowKey: "id", pagination: { hideOnSinglePage: true } }));
}
function DescriptionColumn({ id, cost, description, updating, setUpdating, isMounted, onChange, reload, tab, }) {
    const { input } = cost;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12pt" }, children: [description.title && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("b", { children: description.title }) })), description.description && (0, jsx_runtime_1.jsx)("div", { children: description.description }), (0, site_license_cost_1.describeItem)({ info: input })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: "5px" }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Button, { disabled: updating, onClick: async () => {
                            setUpdating(true);
                            try {
                                await (0, post_1.default)("/shopping/cart/add", {
                                    id,
                                    purchased: tab == "buy-it-again",
                                });
                                if (!isMounted.current)
                                    return;
                                onChange();
                                await reload();
                            }
                            finally {
                                if (!isMounted.current)
                                    return;
                                setUpdating(false);
                            }
                        }, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "shopping-cart" }), " ", tab == "buy-it-again" ? "Add to Cart" : "Move to Cart"] }), tab == "saved-for-later" && ((0, jsx_runtime_1.jsx)(antd_1.Popconfirm, { title: "Are you sure you want to delete this item?", onConfirm: async () => {
                            setUpdating(true);
                            try {
                                await (0, post_1.default)("/shopping/cart/delete", { id });
                                if (!isMounted.current)
                                    return;
                                await reload();
                            }
                            finally {
                                if (!isMounted.current)
                                    return;
                                setUpdating(false);
                            }
                        }, okText: "Yes, delete this item", cancelText: "Cancel", children: (0, jsx_runtime_1.jsxs)(antd_1.Button, { disabled: updating, type: "dashed", style: { margin: "0 5px" }, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "trash" }), " Delete"] }) }))] })] }));
}
//# sourceMappingURL=other-items.js.map