import React, { useCallback } from "react";
import { useDispatch } from "react-redux";
import { updateLayerProp } from "../../redux/actions";
import DrawModeSelector from "./DrawModeSelector";
import NumericInput from "./NumericInput";
import ToggleButton from "./ToggleButton";
import SliderInput from "./SliderInput";
import { SliderTypeProps, ToggleTypeProps, MenuTypeProps, NumericTypeProps, } from "../../redux/types";
const LayerProperty = React.memo(({ layer }) => {
    // Redux
    const dispatch = useDispatch();
    // handlers
    const updateProp = useCallback((layer_id, prop_name, state) => dispatch(updateLayerProp([layer_id, prop_name, state])), [dispatch]);
    const isControlDisplayable = (propId, dependentOnProp) => {
        if (!layer)
            return false;
        return dependentOnProp
            ? dependentOnProp in layer && propId in layer
            : propId in layer;
    };
    return (layer && (React.createElement(React.Fragment, null,
        // first render all boolean properties
        ToggleTypeProps.map(({ id, displayName, dependentOnProp }) => isControlDisplayable(id, dependentOnProp) && (React.createElement(ToggleButton, { label: displayName, checked: layer[id], onChange: (e) => {
                updateProp(layer["id"], id, e.target.checked);
            }, key: `prop-toggle-${layer["id"]}-${id}` }))),
        // then render all numeric properties
        NumericTypeProps.map(({ id, displayName, dependentOnProp }) => isControlDisplayable(id, dependentOnProp) && (React.createElement(NumericInput, { label: displayName, value: layer[id], onChange: (e) => {
                updateProp(layer["id"], id, Number(e.target.value));
            }, key: `prop-numeric-input-${layer["id"]}-${id}` }))),
        // then render all slider properties
        SliderTypeProps.map(({ id, displayName, min, max, step, dependentOnProp, }) => isControlDisplayable(id, dependentOnProp) && (React.createElement(SliderInput, { label: displayName, min: min, max: max, step: step, value: layer[id], onChange: (_, value) => {
                updateProp(layer["id"], id, value / 100);
            }, key: `prop-slider-${layer["id"]}-${id}` }))),
        // lastly render all menu type properties
        MenuTypeProps.map(({ id, displayName, dependentOnProp }) => isControlDisplayable(id, dependentOnProp) && (React.createElement(DrawModeSelector, { layerId: layer["id"], label: displayName, value: layer[id], key: `prop-menu-${layer["id"]}-${id}` }))))));
});
LayerProperty.displayName = "LayerProperty";
export default LayerProperty;
//# sourceMappingURL=LayerProperty.js.map