"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PickResourcesListButton = exports.PickResourceList = void 0;
const tslib_1 = require("tslib");
/** @jsx jsx */
const core_1 = require("@emotion/core");
const react_1 = require("react");
const mobx_1 = require("mobx");
const mobx_react_1 = require("mobx-react");
const ResourcesPicker_1 = require("./ResourcesPicker");
const core_2 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const app_context_1 = require("@builder.io/app-context");
const capitalize_1 = require("lodash/capitalize");
const pluralize_1 = require("pluralize");
const ResourcePreviewById = (props) => {
    const { id } = props, rest = tslib_1.__rest(props, ["id"]);
    const store = (0, mobx_react_1.useLocalStore)(() => ({
        loading: false,
        resourceInfo: null,
        getResource() {
            return tslib_1.__awaiter(this, void 0, void 0, function* () {
                this.loading = true;
                try {
                    const value = yield props.api[props.resourceName].findById(props.id);
                    this.resourceInfo = value;
                }
                catch (e) {
                    console.error(e);
                }
                this.loading = false;
            });
        },
    }));
    (0, react_1.useEffect)(() => {
        store.getResource();
    }, []);
    return (0, mobx_react_1.useObserver)(() => {
        // TODO: HTTP cache, while loading show placeholder loading
        if (store.loading) {
            // TODO: fancy material placeholders
            return (0, core_1.jsx)(core_2.CircularProgress, { disableShrink: true, size: 20 });
        }
        return ((store.resourceInfo && (0, core_1.jsx)(ResourcesPicker_1.ResourcePreviewCell, Object.assign({ resource: store.resourceInfo }, rest))) || ((0, core_1.jsx)(react_1.default.Fragment, null)));
    });
};
function PickResourceList(props) {
    const store = (0, mobx_react_1.useLocalStore)(() => ({
        value: props.value || [],
    }));
    return (0, mobx_react_1.useObserver)(() => {
        var _a;
        return ((0, core_1.jsx)(react_1.default.Fragment, null,
            (0, core_1.jsx)(core_2.Typography, { variant: "caption", css: { paddingBottom: 15, textAlign: 'center' } },
                "Choose ",
                pluralize_1.default.plural(props.resourceName)),
            (0, core_1.jsx)("div", null, (_a = store.value) === null || _a === void 0 ? void 0 : _a.map((item, index) => ((0, core_1.jsx)("div", { css: {
                    display: 'flex',
                    '&:hover button': {
                        opacity: 1,
                    },
                }, key: index },
                (0, core_1.jsx)(ResourcePreviewById, { resourceName: props.resourceName, key: item, id: item, api: props.api }),
                (0, core_1.jsx)(core_2.Tooltip, { title: "Remove product" },
                    (0, core_1.jsx)(core_2.IconButton, { css: {
                            opacity: 0,
                            transition: 'opacity 0.2s ease-in-out',
                            padding: 5,
                            marginLeft: 'auto',
                            alignSelf: 'center',
                        }, onClick: () => {
                            const res = [
                                ...store.value.slice(0, store.value.indexOf(item)),
                                ...store.value.slice(store.value.indexOf(item) + 1),
                            ];
                            store.value = res;
                            props.onChange(res);
                        } },
                        (0, core_1.jsx)(icons_1.Close, null))))))),
            (0, core_1.jsx)(core_2.Button, { color: "primary", variant: "outlined", fullWidth: true, css: { marginTop: 10 }, onClick: () => {
                    const { value, resourcePicker } = props, rest = tslib_1.__rest(props, ["value", "resourcePicker"]);
                    const PickerCompnent = resourcePicker || ResourcesPicker_1.ResourcePicker;
                    const close = app_context_1.default.globalState.openDialog((0, core_1.jsx)(PickerCompnent, Object.assign({}, rest, { context: app_context_1.default, omitIds: store.value, onChange: (0, mobx_1.action)(resource => {
                            if (resource) {
                                if (!Array.isArray(store.value)) {
                                    store.value = [];
                                }
                                store.value.push(String(resource.id));
                                props.onChange(store.value);
                            }
                            close();
                        }) })), false, {
                        PaperProps: {
                            // Align modal to top so doesn't jump around centering itself when
                            // grows and shrinks to show more/less resources or loading
                            style: {
                                alignSelf: 'flex-start',
                            },
                        },
                    });
                } },
                "+ ",
                (0, capitalize_1.default)(props.resourceName)),
            (0, core_1.jsx)(core_2.Button, { color: "primary", variant: "outlined", fullWidth: true, css: { marginTop: 10 }, onClick: props.onDone }, "Done")));
    });
}
exports.PickResourceList = PickResourceList;
function PickResourcesListButton(props) {
    (0, react_1.useEffect)(() => {
        if (typeof props.value === 'undefined') {
            try {
                props.onChange([]);
            }
            catch (e) {
                console.warn('coudnt set default value', e);
            }
        }
    }, []);
    return (0, mobx_react_1.useObserver)(() => {
        var _a, _b;
        return ((0, core_1.jsx)(react_1.default.Fragment, null,
            (0, core_1.jsx)(core_2.Button, { onClick: () => {
                    const close = app_context_1.default.globalState.openDialog((0, core_1.jsx)("div", { css: { padding: 30, width: 500, maxWidth: '90vw' } },
                        (0, core_1.jsx)(PickResourceList, Object.assign({}, props, { onDone: () => close() }))), false, {
                        PaperProps: {
                            // Align modal to top so doesn't jump around centering itself when
                            // grows and shrinks to show more/less resources or loading
                            style: {
                                alignSelf: 'flex-start',
                            },
                        },
                    });
                }, color: "inherit", css: { color: '#999', whiteSpace: 'nowrap' } },
                ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) || 0,
                " ",
                (0, pluralize_1.default)(props.resourceName, ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) || 0))));
    });
}
exports.PickResourcesListButton = PickResourcesListButton;
//# sourceMappingURL=ResourcesList.js.map