"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinkingDataDialog = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const react_draggable_1 = tslib_1.__importDefault(require("react-draggable"));
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const core_1 = require("@material-ui/core");
const CloseGrayIcon_1 = require("../../CommonUI/Icon/CloseGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const PropertyEditorInteger_1 = require("../../CommonUI/PropertyEditing/PropertyEditorInteger");
const PropertyEditorSelect_1 = require("../../CommonUI/PropertyEditing/PropertyEditorSelect");
const UISwitch_1 = require("../../CommonUI/BuildlingBlocks/UISwitch");
const LinkingDataDialog = (props) => {
    const { editContext } = props;
    const closeLinkingData = () => {
        editContext.openLinkDialog = false;
    };
    const changePeriod = (event) => {
        editContext.linkData.period = event.target.value;
        StateManager_1.StateManager.propertyChanged(editContext, "linkData");
    };
    const changeServerSettings = (newValue) => {
        editContext.linkData.serviceSetting = newValue;
        StateManager_1.StateManager.propertyChanged(editContext, "linkData");
    };
    const changeStoreData = (newValue) => {
        editContext.linkData.storeData = newValue;
        StateManager_1.StateManager.propertyChanged(editContext, "linkData");
    };
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: editContext, properties: ["openLinkDialog", "linkData"], control: () => {
            if (!editContext.openLinkDialog)
                return null;
            return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { handle: ".LinkingData-root", children: (0, jsx_runtime_1.jsx)(LinkingDataDialogDiv, { children: (0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(CloseButton, { onClick: closeLinkingData, children: (0, jsx_runtime_1.jsx)(CloseGrayIcon_1.CloseGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h4", classes: { root: "LinkingData-root" }, children: "Linking Data" }), (0, jsx_runtime_1.jsxs)("div", { className: "link-web-table", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "body1", classes: { root: "LinkingData-label" }, children: "Link on web table" }), (0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "body1", classes: { root: "LinkingData-value" }, children: "https://webtable.com" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "fetch-data", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "body1", classes: { root: "LinkingData-label" }, children: "How often to fetch data?" }), (0, jsx_runtime_1.jsx)(core_1.FormControl, { component: "fieldset", children: (0, jsx_runtime_1.jsxs)(core_1.RadioGroup, { "aria-label": "Period", name: "period", value: editContext.linkData.period, onChange: changePeriod, children: [(0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: "every_day", control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Every Day", classes: { root: "CellSetting-radioLabel" } }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: "once", control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Once every", classes: { root: "CellSetting-radioLabel" } }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: "several", control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Several times", classes: { root: "CellSetting-radioLabel" } })] }) }), editContext.linkData.period === "several" && ((0, jsx_runtime_1.jsxs)(SeveralPeriodData, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "several-data-row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "several-data-column", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "Times" }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: editContext.linkData.periodData, propertyName: "times", updateCallback: () => {
                                                                    StateManager_1.StateManager.propertyChanged(editContext, "linkData");
                                                                } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "several-data-column", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "Period" }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "period", options: ["day", "week", "month"], updateCallback: () => {
                                                                    StateManager_1.StateManager.propertyChanged(editContext, "linkData");
                                                                } })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "several-data-row", children: (0, jsx_runtime_1.jsxs)("div", { className: "several-data-column", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "On" }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "onWeekDays", options: [
                                                                "Monday",
                                                                "Tuesday",
                                                                "Wednesday",
                                                                "Thursday",
                                                                "Friday",
                                                                "Saturday",
                                                                "Sunday",
                                                            ], updateCallback: () => {
                                                                StateManager_1.StateManager.propertyChanged(editContext, "linkData");
                                                            } })] }) })] })), editContext.linkData.period === "once" && ((0, jsx_runtime_1.jsxs)(SeveralPeriodData, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "several-data-row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "several-data-column", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "Value" }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: editContext.linkData.periodData, propertyName: "value", updateCallback: () => {
                                                                    StateManager_1.StateManager.propertyChanged(editContext, "linkData");
                                                                } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "several-data-column", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "Period" }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "period", options: ["day", "week", "month"], updateCallback: () => {
                                                                    StateManager_1.StateManager.propertyChanged(editContext, "linkData");
                                                                } })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "several-data-row", children: (0, jsx_runtime_1.jsxs)("div", { className: "several-data-column", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "At" }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "at", options: [
                                                                "1",
                                                                "2",
                                                                "3",
                                                                "4",
                                                                "5",
                                                                "6",
                                                                "7",
                                                                "8",
                                                                "9",
                                                                "10",
                                                                "11",
                                                                "12",
                                                                "13",
                                                                "14",
                                                                "15",
                                                                "16",
                                                                "17",
                                                                "18",
                                                                "19",
                                                                "20",
                                                                "21",
                                                                "22",
                                                                "23",
                                                                "24",
                                                                "25",
                                                                "26",
                                                                "27",
                                                                "28",
                                                                "29",
                                                                "30",
                                                            ], updateCallback: () => {
                                                                StateManager_1.StateManager.propertyChanged(editContext, "linkData");
                                                            } })] }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "store-data", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "Store data results for audit" }), (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: editContext.linkData.storeData, onSet: changeStoreData })] }), (0, jsx_runtime_1.jsxs)("div", { className: "settings-data", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, children: "Service settings" }), (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: editContext.linkData.serviceSetting, onSet: changeServerSettings })] }), (0, jsx_runtime_1.jsxs)("div", { className: "format-data", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { classes: { root: "several-data-row-label" }, variant: "subtitle1", children: "Format" }), (0, jsx_runtime_1.jsxs)(core_1.Typography, { variant: "body1", classes: { root: "several-data-row-description" }, children: ["Example structure table for import in ", (0, jsx_runtime_1.jsx)("span", { children: "CSV" }), " or ", (0, jsx_runtime_1.jsx)("span", { children: "JSON" }), " ", "format."] }), (0, jsx_runtime_1.jsx)(core_1.FormControl, { component: "fieldset", classes: { root: "LinkingData-format" }, children: (0, jsx_runtime_1.jsxs)(core_1.RadioGroup, { "aria-label": "Period", name: "period", value: editContext.linkData.period, onChange: changePeriod, children: [(0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: "csv", control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "CSV", classes: { root: "CellSetting-radioLabel" } }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: "json", control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "JSON", classes: { root: "CellSetting-radioLabel" } })] }) })] })] }) }) }));
        } }));
};
exports.LinkingDataDialog = LinkingDataDialog;
const LinkingDataDialogDiv = styled_components_1.default.div `
    position: absolute;
    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    border-radius: 8px;
`;
const Wrapper = styled_components_1.default.div `
    position: relative;
    padding: 32px;
    min-width: 344px;

    .LinkingData-root {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: center;
        color: #272932;
    }

    .LinkingData-label {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;

        color: #272932;
    }

    .LinkingData-value {
        color: #4050a6;

        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;
    }

    .item-row {
        margin-bottom: 16px;
    }

    .CellSetting-radioLabel .MuiTypography-body1 {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;
        color: #272932;
    }

    .several-data-row {
    }

    .several-data-row-label {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        color: #272932;
    }

    .settings-data,
    .store-data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        border-top: solid 1px rgba(39, 41, 50, 0.15);
    }

    .format-data {
        border-top: solid 1px rgba(39, 41, 50, 0.15);

        .several-data-row-label {
            margin-bottom: 2px;
        }

        .several-data-row-description {
            margin-bottom: 16px;

            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 14px;
            letter-spacing: 0em;
            text-align: left;

            color: #606881;

            span {
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 17px;
                letter-spacing: 0px;
                text-align: left;
                color: #272932;
            }
        }
    }

    .LinkingData-format {
        width: 100%;

        .MuiFormGroup-root {
            flex-direction: row;
        }
    }

    .link-web-table,
    .fetch-data {
        margin-bottom: 16px;
    }

    .format-data {
        padding-top: 16px;
    }

    .several-data-row {
        display: flex;
        flex-direction: row;
    }
`;
const CloseButton = styled_components_1.default.div `
    position: absolute;
    top: 4px;
    right: 4px;
`;
const SeveralPeriodData = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    padding-left: 32px;
`;
//# sourceMappingURL=LinkingDataDialog.js.map