import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import ReactDraggable from "react-draggable";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { FormControl, FormControlLabel, Radio, RadioGroup, Switch, Typography } from "@material-ui/core";
import { CloseGrayIcon } from "../../CommonUI/Icon/CloseGrayIcon";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
export const LinkingDataDialog = (props) => {
    const { editContext } = props;
    const closeLinkingData = () => {
        editContext.openLinkDialog = false;
    };
    const changePeriod = (event) => {
        editContext.linkData.period = event.target.value;
        StateManager.propertyChanged(editContext, 'linkData');
    };
    const changeServerSettings = (event) => {
        editContext.linkData.serviceSetting = event.target.checked;
        StateManager.propertyChanged(editContext, 'linkData');
    };
    const changeStoreData = (event) => {
        editContext.linkData.storeData = event.target.checked;
        StateManager.propertyChanged(editContext, 'linkData');
    };
    return _jsx(ObserveState, { listenTo: editContext, properties: ['openLinkDialog', 'linkData'], control: () => {
            if (!editContext.openLinkDialog)
                return null;
            return _jsx(ReactDraggable, Object.assign({ handle: ".LinkingData-root" }, { children: _jsx(LinkingDataDialogDiv, { children: _jsxs(Wrapper, { children: [_jsx(CloseButton, Object.assign({ onClick: closeLinkingData }, { children: _jsx(CloseGrayIcon, {}, void 0) }), void 0),
                            _jsx(Typography, Object.assign({ variant: "h4", classes: { root: 'LinkingData-root' } }, { children: "Linking Data" }), void 0),
                            _jsxs("div", Object.assign({ className: "link-web-table" }, { children: [_jsx(Typography, Object.assign({ variant: "body1", classes: { root: 'LinkingData-label' } }, { children: "Link on web table" }), void 0),
                                    _jsx(Typography, Object.assign({ variant: "body1", classes: { root: 'LinkingData-value' } }, { children: "https://webtable.com" }), void 0)] }), void 0),
                            _jsxs("div", Object.assign({ className: "fetch-data" }, { children: [_jsx(Typography, Object.assign({ variant: "body1", classes: { root: 'LinkingData-label' } }, { children: "How often to fetch data?" }), void 0),
                                    _jsx(FormControl, Object.assign({ component: "fieldset" }, { children: _jsxs(RadioGroup, Object.assign({ "aria-label": "Period", name: "period", value: editContext.linkData.period, onChange: changePeriod }, { children: [_jsx(FormControlLabel, { value: "every_day", control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Every Day", classes: { root: 'CellSetting-radioLabel' } }, void 0),
                                                _jsx(FormControlLabel, { value: "once", control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Once every", classes: { root: 'CellSetting-radioLabel' } }, void 0),
                                                _jsx(FormControlLabel, { value: "several", control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Several times", classes: { root: 'CellSetting-radioLabel' } }, void 0)] }), void 0) }), void 0),
                                    editContext.linkData.period === 'several' && _jsxs(SeveralPeriodData, { children: [_jsxs("div", Object.assign({ className: "several-data-row" }, { children: [_jsxs("div", Object.assign({ className: "several-data-column" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "Times" }), void 0),
                                                            _jsx(PropertyEditorInteger, { editObject: editContext.linkData.periodData, propertyName: "times", updateCallback: () => {
                                                                    StateManager.propertyChanged(editContext, 'linkData');
                                                                } }, void 0)] }), void 0),
                                                    _jsxs("div", Object.assign({ className: "several-data-column" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "Period" }), void 0),
                                                            _jsx(PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "period", options: ['day', 'week', 'month'], updateCallback: () => {
                                                                    StateManager.propertyChanged(editContext, 'linkData');
                                                                } }, void 0)] }), void 0)] }), void 0),
                                            _jsx("div", Object.assign({ className: "several-data-row" }, { children: _jsxs("div", Object.assign({ className: "several-data-column" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "On" }), void 0),
                                                        _jsx(PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "onWeekDays", options: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], updateCallback: () => {
                                                                StateManager.propertyChanged(editContext, 'linkData');
                                                            } }, void 0)] }), void 0) }), void 0)] }, void 0),
                                    editContext.linkData.period === 'once' && _jsxs(SeveralPeriodData, { children: [_jsxs("div", Object.assign({ className: "several-data-row" }, { children: [_jsxs("div", Object.assign({ className: "several-data-column" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "Value" }), void 0),
                                                            _jsx(PropertyEditorInteger, { editObject: editContext.linkData.periodData, propertyName: "value", updateCallback: () => {
                                                                    StateManager.propertyChanged(editContext, 'linkData');
                                                                } }, void 0)] }), void 0),
                                                    _jsxs("div", Object.assign({ className: "several-data-column" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "Period" }), void 0),
                                                            _jsx(PropertyEditorSelect, { editObject: editContext.linkData.periodData, propertyName: "period", options: ['day', 'week', 'month'], updateCallback: () => {
                                                                    StateManager.propertyChanged(editContext, 'linkData');
                                                                } }, void 0)] }), void 0)] }), void 0),
                                            _jsx("div", Object.assign({ className: "several-data-row" }, { children: _jsxs("div", Object.assign({ className: "several-data-column" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "At" }), void 0),
                                                        _jsx(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.propertyChanged(editContext, 'linkData');
                                                            } }, void 0)] }), void 0) }), void 0)] }, void 0)] }), void 0),
                            _jsxs("div", Object.assign({ className: "store-data" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "Store data results for audit" }), void 0),
                                    _jsx(Switch, { checked: editContext.linkData.storeData, onChange: changeStoreData, color: "primary", name: "serverSettings", size: "small" }, void 0)] }), void 0),
                            _jsxs("div", Object.assign({ className: "settings-data" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' } }, { children: "Service settings" }), void 0),
                                    _jsx(Switch, { checked: editContext.linkData.serviceSetting, onChange: changeServerSettings, color: "primary", name: "serverSettings", size: "small" }, void 0)] }), void 0),
                            _jsxs("div", Object.assign({ className: "format-data" }, { children: [_jsx(Typography, Object.assign({ classes: { root: 'several-data-row-label' }, variant: "subtitle1" }, { children: "Format" }), void 0),
                                    _jsxs(Typography, Object.assign({ variant: "body1", classes: { root: 'several-data-row-description' } }, { children: ["Example structure table for import in ", _jsx("span", { children: "CSV" }, void 0), " or ", _jsx("span", { children: "JSON" }, void 0), " format."] }), void 0),
                                    _jsx(FormControl, Object.assign({ component: "fieldset", classes: { root: 'LinkingData-format' } }, { children: _jsxs(RadioGroup, Object.assign({ "aria-label": "Period", name: "period", value: editContext.linkData.period, onChange: changePeriod }, { children: [_jsx(FormControlLabel, { value: "csv", control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "CSV", classes: { root: 'CellSetting-radioLabel' } }, void 0),
                                                _jsx(FormControlLabel, { value: "json", control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "JSON", classes: { root: 'CellSetting-radioLabel' } }, void 0)] }), void 0) }), void 0)] }), void 0)] }, void 0) }, void 0) }), void 0);
        } }, void 0);
};
const LinkingDataDialogDiv = styled.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.div `
    position: relative;
    padding: 32px;
    min-width: 344px;

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

    .LinkingData-label {
        font-family: Inter;
        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-family: Inter;
        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-family: Inter;
        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-family: Inter;
        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-family: Inter;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 14px;
            letter-spacing: 0em;
            text-align: left;

            color: #606881;

            span {
                font-family: Inter;
                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.div `
    position: absolute;
    top: 4px;
    right: 4px;
`;
const SeveralPeriodData = styled.div `
    display: flex;
    flex-direction: column;

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