"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/** @jsx jsx */
var core_1 = require("@emotion/core");
var react_1 = require("react");
var mobx_1 = require("mobx");
var mobx_react_1 = require("mobx-react");
var EcomCollectionPicker_1 = require("./EcomCollectionPicker");
var core_2 = require("@material-ui/core");
var icons_1 = require("@material-ui/icons");
var app_context_1 = require("@builder.io/app-context");
var CollectionPreviewById = function (props) {
    var id = props.id, rest = __rest(props, ["id"]);
    var store = mobx_react_1.useLocalStore(function () { return ({
        loading: false,
        collectionInfo: null,
        getCollection: function () {
            return __awaiter(this, void 0, void 0, function () {
                var value, e_1;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            this.loading = true;
                            _a.label = 1;
                        case 1:
                            _a.trys.push([1, 3, , 4]);
                            return [4 /*yield*/, props.api.getCollectionById(props.id)];
                        case 2:
                            value = _a.sent();
                            this.collectionInfo = value;
                            return [3 /*break*/, 4];
                        case 3:
                            e_1 = _a.sent();
                            console.error(e_1);
                            return [3 /*break*/, 4];
                        case 4:
                            this.loading = false;
                            return [2 /*return*/];
                    }
                });
            });
        },
    }); });
    react_1.useEffect(function () {
        store.getCollection();
    }, []);
    return mobx_react_1.useObserver(function () {
        // TODO: HTTP cache, while loading show placeholder loading
        if (store.loading) {
            // TODO: fancy material placeholders
            return core_1.jsx(core_2.CircularProgress, { disableShrink: true, size: 20 });
        }
        return ((store.collectionInfo && (core_1.jsx(EcomCollectionPicker_1.CollectionPreviewCell, __assign({ collection: store.collectionInfo }, rest)))) || core_1.jsx(react_1.default.Fragment, null));
    });
};
function PickEcomCollectionsList(props) {
    var store = mobx_react_1.useLocalStore(function () { return ({
        get value() {
            return props.value || [];
        },
    }); });
    return mobx_react_1.useObserver(function () {
        var _a;
        return (core_1.jsx(react_1.default.Fragment, null,
            core_1.jsx(core_2.Typography, { variant: "caption", css: { paddingBottom: 15, textAlign: 'center' } }, "Choose collections"),
            core_1.jsx("div", null, (_a = store.value) === null || _a === void 0 ? void 0 : _a.map(function (item, index) { return (core_1.jsx("div", { css: {
                    display: 'flex',
                    '&:hover button': {
                        opacity: 1,
                    },
                }, key: index },
                core_1.jsx(CollectionPreviewById, { key: item, id: item, api: props.api }),
                core_1.jsx(core_2.Tooltip, { title: "Remove collection" },
                    core_1.jsx(core_2.IconButton, { css: {
                            opacity: 0,
                            transition: 'opacity 0.2s ease-in-out',
                            padding: 5,
                            marginLeft: 'auto',
                            alignSelf: 'center',
                        }, onClick: function () {
                            var res = __spreadArrays(props.value).splice(props.value.indexOf(item) + 1, 1);
                            props.onChange(res);
                        } },
                        core_1.jsx(icons_1.Close, null))))); })),
            core_1.jsx(core_2.Button, { color: "primary", variant: "outlined", fullWidth: true, css: { marginTop: 10 }, onClick: function () {
                    var close = app_context_1.default.globalState.openDialog(core_1.jsx(EcomCollectionPicker_1.CollectionPicker, { api: props.api, context: app_context_1.default, omitIds: store.value, onChange: mobx_1.action(function (collection) {
                            if (collection) {
                                props.onChange(__spreadArrays((store.value || []), [String(collection.id)]));
                            }
                            close();
                        }) }));
                } }, "+ Collection"),
            core_1.jsx(core_2.Button, { color: "primary", variant: "outlined", fullWidth: true, css: { marginTop: 10 }, onClick: props.onDone }, "Done")));
    });
}
exports.PickEcomCollectionsList = PickEcomCollectionsList;
function PickEcomCollectionsButton(props) {
    react_1.useEffect(function () {
        if (typeof props.value === 'undefined') {
            props.onChange([]);
        }
    }, []);
    return mobx_react_1.useObserver(function () {
        var _a;
        return (core_1.jsx(react_1.default.Fragment, null,
            core_1.jsx(core_2.Button, { onClick: function () {
                    var close = app_context_1.default.globalState.openDialog(core_1.jsx("div", { css: { padding: 30, width: 500, maxWidth: '90vw' } },
                        core_1.jsx(PickEcomCollectionsList, __assign({}, props, { onDone: function () { return close(); } }))));
                }, color: "inherit", css: { color: '#999', whiteSpace: 'nowrap' } },
                ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) || 0,
                " collections")));
    });
}
exports.PickEcomCollectionsButton = PickEcomCollectionsButton;
//# sourceMappingURL=EcomCollectionList.js.map