var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import dayjs from 'dayjs';
import { Link } from 'react-router-dom';
import { cx } from '@emotion/css';
import { HStack, VStack, Divider, useDisclosure } from '@chakra-ui/react';
import { CreateApplicationToLS, ColorButton, UpdateApplicationToLS } from './components';
import { AddWidgetIcon, CopyWidgetIcon, DeleteWidgetIcon, EditWidgetIcon, ShareWidgetIcon } from 'components/Svg';
import { ROUTER_BASE_URL } from './router';
import { StyledFont14, StyledFont16, StyledModuleBox } from 'ui/common';
import { LocalStorageManager } from './api/localstorage/LocalStorageManager';
var StyledRecord = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  padding: 20px 40px;\n"], ["\n  align-items: center;\n  padding: 20px 40px;\n"])));
var StyledCard = styled(StyledModuleBox)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 183px;\n  width: 240px;\n  padding: 20px;\n"], ["\n  height: 183px;\n  width: 240px;\n  padding: 20px;\n"])));
var WidgetCard = function (_a) {
    var widget = _a.widget, lsManager = _a.lsManager, callback = _a.callback;
    var _b = useDisclosure(), isOpen = _b.isOpen, onOpenUpdateWidget = _b.onOpen, onClose = _b.onClose;
    var onDeleteWidget = useCallback(function () {
        lsManager.deleteWidget(widget.id);
        callback && callback();
    }, [callback, lsManager, widget.id]);
    var onDuplicateWidgetInLs = useCallback(function () {
        lsManager.duplicateWidgetInLs(widget.id);
        callback && callback();
    }, [callback, lsManager, widget.id]);
    var onExportWidget = useCallback(function () {
        var json = lsManager.getAppFromLS(widget.id);
        var file = new Blob([JSON.stringify(json)], { type: 'text/plain' });
        var a = document.createElement('a');
        a.href = URL.createObjectURL(file);
        a.download = "".concat(widget.name, ".json");
        a.click();
    }, [lsManager, widget]);
    return (_jsxs(StyledCard, __assign({ mr: "20px" }, { children: [_jsx(StyledFont14, __assign({ block: true, bold: true }, { children: widget.name })), _jsx(Divider, { my: "10px" }), _jsx(StyledFont14, __assign({ block: true }, { children: dayjs.unix(widget.updated_at).fromNow(true) })), _jsxs(HStack, __assign({ spacing: "2", mt: "10px" }, { children: [_jsx(CopyWidgetIcon, { width: "15px", pointer: true, onClick: onDuplicateWidgetInLs }), _jsx(ShareWidgetIcon, { width: "15px", pointer: true, onClick: onExportWidget }), _jsx(EditWidgetIcon, { width: "15px", pointer: true, onClick: onOpenUpdateWidget }), _jsx(DeleteWidgetIcon, { width: "15px", pointer: true, onClick: onDeleteWidget })] })), _jsx(Divider, { my: "10px" }), _jsx(Link, __assign({ to: "".concat(ROUTER_BASE_URL, "/editor/").concat(widget.id) }, { children: _jsx(ColorButton, { children: "Editor" }) })), _jsx(UpdateApplicationToLS, { widget: widget, onUpdated: callback, isOpen: isOpen, onClose: onClose })] }), widget.id));
};
var Record = function (_a) {
    var className = _a.className;
    var lsManager = useMemo(function () { return new LocalStorageManager(); }, []);
    var _b = useState(0), freshKey = _b[0], setFreshKey = _b[1];
    // const [currentWidget, SetCurrentWidget] = useState<WidgetItem | null>(null);
    var _c = useDisclosure(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
    var freshData = useCallback(function () {
        setFreshKey(freshKey + 1);
    }, [freshKey]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    var widgetsFromLS = useMemo(function () { return lsManager.getWidgetsFromLS(); }, [lsManager, freshKey]);
    return (_jsx(StyledRecord, __assign({ className: cx(className, 'chakraCSSReset') }, { children: _jsxs(VStack, __assign({ spacing: 3, align: "stretch" }, { children: [_jsx(StyledFont16, __assign({ bold: true, block: true }, { children: "Widget Management" })), _jsxs(StyledModuleBox, __assign({ p: "20px", display: "flex", spacing: "5", flexWrap: "wrap" }, { children: [_jsxs(StyledCard, __assign({ mr: "20px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-evenly", onClick: onOpen }, { children: [_jsx(AddWidgetIcon, { width: "64" }), _jsx(ColorButton, { children: "Create Widget" })] })), widgetsFromLS.map(function (widget) {
                            return _jsx(WidgetCard, { widget: widget, lsManager: lsManager, callback: freshData }, widget.id);
                        })] })), _jsx(CreateApplicationToLS, { onCreated: freshData, isOpen: isOpen, onClose: onClose })] })) })));
};
export default Record;
var templateObject_1, templateObject_2;
