import { __assign, __rest } from "tslib";
import React, { useState } from "react";
import { Card, Modal, Text, Row, Space, Toggle, Icons } from "v-eris";
import { ColorPicker } from "./types.color";
import { Ranges } from "./types.ranges";
import "./types.zoom.scss";
export var LocatorsParams = function (props) {
    var className = props.className, config = props.config, value = props.value, onChange = props.onChange, inactive = props.inactive, lang = props.lang, rest = __rest(props, ["className", "config", "value", "onChange", "inactive", "lang"]);
    var _a = useState(false), active = _a[0], setActive = _a[1];
    if (!value)
        value = {};
    if (!config)
        config = {};
    var change = function (key, valueArg) {
        var v = __assign({}, config);
        v[key] = valueArg;
        if (!onChange)
            return;
        onChange({ value: v });
    };
    return (React.createElement(Card, { header: React.createElement("span", null,
            React.createElement(Icons.sphere, null),
            React.createElement(Space, null),
            value.name) },
        React.createElement(Row, null,
            lang.get("Types::Locators::SAC:SIC"),
            ": ",
            value.sac + ":" + value.sic,
            React.createElement(Space, null)),
        React.createElement(Row, null,
            lang.get("Types::Locators::LayerEnabled"),
            ":",
            React.createElement(Space, null),
            React.createElement(Toggle, { value: config.LayerEnabled, inactive: true })),
        React.createElement(Row, null,
            lang.get("Types::Locators::MarksColor"),
            ":",
            React.createElement(Space, null),
            React.createElement(ColorPicker, { value: config.MarksColor, inactive: true })),
        React.createElement(Row, null,
            lang.get("Types::Locators::MarksShadow"),
            ":",
            React.createElement(Space, null),
            React.createElement(ColorPicker, { value: config.MarksShadow, inactive: true })),
        React.createElement(Row, null,
            lang.get("Types::Locators::Opacity"),
            ":",
            React.createElement(Space, null),
            config.Opacity,
            "%"),
        React.createElement(Row, null,
            lang.get("Types::Locators::Grid"),
            ":",
            React.createElement(Space, null),
            React.createElement(Toggle, { value: config.Grid, inactive: true })),
        React.createElement(Row, { className: "settings-type-params-tools" },
            React.createElement(Text, { success: true, onClick: function () { setActive(true); } }, "Edit")),
        React.createElement(Modal, { className: "settings-type-params-modal", bg: true, active: active, onClose: function () {
                setActive(false);
            } },
            React.createElement(Card, { header: React.createElement("span", null, value.name), headerless: true },
                React.createElement(Row, null,
                    lang.get("Types::Locators::SAC:SIC"),
                    React.createElement(Space, null),
                    value.sac + ":" + value.sic),
                React.createElement(Row, null,
                    React.createElement(Toggle, { value: config.LayerEnabled, onChange: function (e) { return change("LayerEnabled", e.value); } }),
                    React.createElement(Space, null),
                    React.createElement(Row, null, lang.get("Types::Locators::LayerEnabled")),
                    React.createElement(Space, null)),
                React.createElement(Row, null,
                    React.createElement(Toggle, { value: config.MarksColorEnabled, onChange: function (e) { return change("MarksColorEnabled", e.value); } }),
                    React.createElement(Space, null),
                    React.createElement(Row, null,
                        lang.get("Types::Locators::MarksColor"),
                        ":"),
                    React.createElement(Space, null),
                    React.createElement(ColorPicker, { value: config.MarksColor, onChange: function (e) { return change("MarksColor", e.value); } })),
                React.createElement(Row, null,
                    React.createElement(Toggle, { value: config.MarksShadowEnabled, onChange: function (e) { return change("MarksShadowEnabled", e.value); } }),
                    React.createElement(Space, null),
                    React.createElement(Row, null,
                        lang.get("Types::Locators::MarksShadow"),
                        ":"),
                    React.createElement(Space, null),
                    React.createElement(ColorPicker, { value: config.MarksShadow, onChange: function (e) { return change("MarksShadow", e.value); } })),
                React.createElement("div", null,
                    React.createElement(Row, null,
                        React.createElement(Toggle, { value: config.OpacityEnabled, onChange: function (e) { return change("OpacityEnabled", e.value); } }),
                        React.createElement(Space, null),
                        React.createElement(Row, null,
                            lang.get("Types::Locators::Opacity"),
                            ":",
                            React.createElement(Space, null),
                            React.createElement("span", null,
                                config.Opacity,
                                "%"),
                            React.createElement(Space, null))),
                    React.createElement(Row, null,
                        React.createElement(Ranges, { value: config.Opacity, min: 0, max: 100, single: true, onChange: function (e) { return change("Opacity", e.value); } }))),
                React.createElement(Row, null,
                    React.createElement(Toggle, { value: config.GridEnabled, onChange: function (e) { return change("GridEnabled", e.value); } }),
                    React.createElement(Space, null),
                    React.createElement(Row, null, lang.get("Types::Locators::Grid")),
                    React.createElement(Space, null))))));
};
//# sourceMappingURL=types.locators.js.map