import { mapObjIndexed, mergeAll, isEmpty } from "ramda";
import { initialLegendRight } from "../../global/options";
// almost the same as in old dashboard to ensure readers that it works the same way
const getDataAttribute = (element, key, defaultValue) => {
    const dataKey = `data-${key}`;
    if (element.hasAttribute(dataKey)) {
        // we know it's not null because of hasAttribute()
        const data = element.getAttribute(dataKey);
        if (data === "true") {
            return true;
        }
        if (data === "false") {
            return false;
        }
        if (data === "null") {
            return null;
        }
        // Only convert to a number if it doesn't change the string
        if (data === `${+data}`) {
            return +data;
        }
        if (/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/.test(data)) {
            return JSON.parse(data);
        }
        return data;
    }
    // if no default is passed, then it's undefined and can be replaced with default value later
    // it is recommended to do it in props destructuring assignment phase, ie.:
    // const Chart = ({ dygraphPointsize = 1 }) => ....
    return defaultValue;
};
const getDataAttributeBoolean = (element, key, defaultValue) => {
    const value = getDataAttribute(element, key, defaultValue);
    if (value === true || value === false) { // gmosx: Love this :)
        return value;
    }
    if (typeof (value) === "string") {
        if (value === "yes" || value === "on") {
            return true;
        }
        if (value === "" || value === "no" || value === "off" || value === "null") {
            return false;
        }
        return defaultValue;
    }
    if (typeof (value) === "number") {
        return value !== 0;
    }
    return defaultValue;
};
// needs to be a getter so all window.NETDATA settings are set
const getAttributesMap = () => ({
    // all properties that don't have `defaultValue` should be "| undefined" in Attributes interface
    // todo try to write above rule in TS
    id: { key: "netdata" },
    host: { key: "host" },
    httpMethod: { key: "http-method" },
    title: { key: "title" },
    chartLibrary: { key: "chart-library", defaultValue: window.NETDATA.chartDefaults.library },
    width: { key: "width", defaultValue: window.NETDATA.chartDefaults.width },
    height: { key: "height", defaultValue: window.NETDATA.chartDefaults.height },
    // todo use chartDefaults for static custom dashboards
    // after: { key: "after", defaultValue: window.NETDATA.chartDefaults.after },
    after: { key: "after" },
    before: { key: "before", defaultValue: window.NETDATA.chartDefaults.before },
    legend: { key: "legend", type: "boolean", defaultValue: true },
    legendPosition: { key: "legend-position" },
    units: { key: "units" },
    unitsCommon: { key: "common-units" },
    unitsDesired: { key: "desired-units" },
    aggrMethod: { key: "aggr-method" },
    labels: { key: "labels" },
    postGroupBy: { key: "post-group-by" },
    postAggregationMethod: { key: "post-aggregation-method" },
    dimensionsAggrMethod: { key: "dimensions-aggr-method" },
    aggrGroups: { key: "aggrGroups" },
    selectedChart: { key: "selected-chart" },
    filteredRows: { key: "filtered-rows" },
    groupBy: { key: "group-by" },
    nodeIDs: { key: "node-ids" },
    colors: { key: "colors" },
    commonColors: { key: "common-colors" },
    decimalDigits: { key: "decimal-digits" },
    dimensions: { key: "dimensions" },
    selectedDimensions: { key: "selected-dimensions" },
    forceTimeWindow: { key: "force-time-window" },
    appendOptions: { key: "append-options" },
    gtime: { key: "gtime" },
    method: { key: "method" },
    overrideOptions: { key: "override-options" },
    pixelsPerPoint: { key: "pixels-per-point" },
    points: { key: "points" },
    heightId: { key: "id" },
    hideResizeHandler: { key: "hide-resize-handler" },
    detectResize: { key: "detect-resize" },
    commonMin: { key: "common-min" },
    commonMax: { key: "common-max" },
    // let's not put the default values here, because they will also be needed by the main Agent page
    // and the Cloud App
    dygraphType: { key: "dygraph-type" },
    dygraphValueRange: { key: "dygraph-valuerange" },
    dygraphTheme: { key: "dygraph-theme" },
    dygraphSmooth: { key: "dygraph-smooth", type: "boolean" },
    dygraphColors: { key: "dygraph-colors" },
    dygraphRightGap: { key: "dygraph-rightgap" },
    dygraphShowRangeSelector: { key: "dygraph-showrangeselector", type: "boolean" },
    dygraphShowRoller: { key: "dygraph-showroller", type: "boolean" },
    dygraphTitle: { key: "dygraph-title" },
    dygraphTitleHeight: { key: "dygraph-titleheight" },
    dygraphLegend: { key: "dygraph-legend" },
    dygraphLabelsDiv: { key: "dygraph-labelsdiv" },
    dygraphLabelsSeparateLine: { key: "dygraph-labelsseparatelines", type: "boolean" },
    dygraphIncludeZero: { key: "dygraph-includezero", type: "boolean" },
    dygraphShowZeroValues: { key: "dygraph-labelsshowzerovalues", type: "boolean" },
    dygraphShowLabelsOnHighLight: { key: "dygraph-showlabelsonhighlight", type: "boolean" },
    dygraphHideOverlayOnMouseOut: { key: "dygraph-hideoverlayonmouseout", type: "boolean" },
    dygraphXRangePad: { key: "dygraph-xrangepad" },
    dygraphYRangePad: { key: "dygraph-yrangepad" },
    dygraphYLabelWidth: { key: "dygraph-ylabelwidth" },
    dygraphStrokeWidth: { key: "dygraph-strokewidth" },
    dygraphStrokePattern: { key: "dygraph-strokepattern" },
    dygraphDrawPoints: { key: "dygraph-drawpoints", type: "boolean" },
    dygraphDrawGapEdgePoints: { key: "dygraph-drawgapedgepoints", type: "boolean" },
    dygraphConnectSeparatedPoints: { key: "dygraph-connectseparatedpoints", type: "boolean" },
    dygraphPointSize: { key: "dygraph-pointsize" },
    dygraphStepPlot: { key: "dygraph-stepplot", type: "boolean" },
    dygraphStrokeBorderColor: { key: "dygraph-strokebordercolor" },
    dygraphStrokeBorderWidth: { key: "dygraph-strokeborderwidth" },
    // it was not boolean in the old app, but that was most likely a bug
    dygraphFillGraph: { key: "dygraph-fillgraph", type: "boolean" },
    dygraphFillAlpha: { key: "dygraph-fillalpha" },
    // also originally not set as boolean
    dygraphStackedGraph: { key: "dygraph-stackedgraph", type: "boolean" },
    dygraphStackedGraphNanFill: { key: "dygraph-stackedgraphnanfill" },
    dygraphAxisLabelFontSize: { key: "dygraph-axislabelfontsize" },
    dygraphAxisLineColor: { key: "dygraph-axislinecolor" },
    dygraphAxisLineWidth: { key: "dygraph-axislinewidth" },
    dygraphDrawGrid: { key: "dygraph-drawgrid", type: "boolean" },
    dygraphGridLinePattern: { key: "dygraph-gridlinepattern" },
    dygraphGridLineWidth: { key: "dygraph-gridlinewidth" },
    dygraphGridLineColor: { key: "dygraph-gridlinecolor" },
    dygraphMaxNumberWidth: { key: "dygraph-maxnumberwidth" },
    dygraphSigFigs: { key: "dygraph-sigfigs" },
    dygraphDigitsAfterDecimal: { key: "dygraph-digitsafterdecimal" },
    // dygraphValueFormatter: { key: "dygraph-valueformatter" },
    dygraphHighlighCircleSize: { key: "dygraph-highlightcirclesize" },
    dygraphHighlightSeriesOpts: { key: "dygraph-highlightseriesopts" },
    dygraphHighlightSeriesBackgroundAlpha: { key: "dygraph-highlightseriesbackgroundalpha" },
    // dygraphPointClickCallback: { key: "dygraph-pointclickcallback" },
    dygraphXPixelsPerLabel: { key: "dygraph-xpixelsperlabel" },
    dygraphXAxisLabelWidth: { key: "dygraph-xaxislabelwidth" },
    dygraphDrawXAxis: { key: "dygraph-drawxaxis", type: "boolean" },
    dygraphYPixelsPerLabel: { key: "dygraph-ypixelsperlabel" },
    dygraphYAxisLabelWidth: { key: "dygraph-yaxislabelwidth" },
    dygraphDrawYAxis: { key: "dygraph-drawyaxis", type: "boolean" },
    dygraphDrawAxis: { key: "dygraph-drawaxis", type: "boolean" },
    easyPieChartMinValue: { key: "easypiechart-min-value" },
    easyPieChartMaxValue: { key: "easypiechart-max-value" },
    easyPieChartBarColor: { key: "easypiechart-barcolor" },
    easyPieChartTrackColor: { key: "easypiechart-trackcolor" },
    easyPieChartScaleColor: { key: "easypiechart-scalecolor" },
    easyPieChartScaleLength: { key: "easypiechart-scalelength" },
    easyPieChartLineCap: { key: "easypiechart-linecap" },
    easyPieChartLineWidth: { key: "easypiechart-linewidth" },
    easyPieChartTrackWidth: { key: "easypiechart-trackwidth" },
    easyPieChartSize: { key: "easypiechart-size" },
    easyPieChartRotate: { key: "easypiechart-rotate" },
    easyPieChartAnimate: { key: "easypiechart-animate" },
    easyPieChartEasing: { key: "easypiechart-easing" },
    gaugeMinValue: { key: "gauge-min-value" },
    gaugeMaxValue: { key: "gauge-max-value" },
    gaugePointerColor: { key: "gauge-pointer-color" },
    gaugeStrokeColor: { key: "gauge-stroke-color" },
    gaugeStartColor: { key: "gauge-start-color" },
    gaugeStopColor: { key: "gauge-stop-color" },
    gaugeGenerateGradient: { key: "gauge-generate-gradient" },
    sparklineType: { key: "sparkline-type" },
    sparklineLineColor: { key: "sparkline-linecolor" },
    sparklineFillColor: { key: "sparkline-fillcolor" },
    sparklineChartRangeMin: { key: "sparkline-chartrangemin" },
    sparklineChartRangeMax: { key: "sparkline-chartrangemax" },
    sparklineComposite: { key: "sparkline-composite" },
    sparklineEnableTagOptions: { key: "sparkline-enabletagoptions" },
    sparklineTagOptionPrefix: { key: "sparkline-tagoptionprefix" },
    sparklineTagValuesAttribute: { key: "sparkline-tagvaluesattribute" },
    sparklineDisableHiddenCheck: { key: "sparkline-disablehiddencheck" },
    sparklineDefaultPixelsPerValue: { key: "sparkline-defaultpixelspervalue" },
    sparklineSpotColor: { key: "sparkline-spotcolor" },
    sparklineMinSpotColor: { key: "sparkline-minspotcolor" },
    sparklineMaxSpotColor: { key: "sparkline-maxspotcolor" },
    sparklineSpotRadius: { key: "sparkline-spotradius" },
    sparklineValueSpots: { key: "sparkline-valuespots" },
    sparklineHighlightSpotColor: { key: "sparkline-highlightspotcolor" },
    sparklineHighlightLineColor: { key: "sparkline-highlightlinecolor" },
    sparklineLineWidth: { key: "sparkline-linewidth" },
    sparklineNormalRangeMin: { key: "sparkline-normalrangemin" },
    sparklineNormalRangeMax: { key: "sparkline-normalrangemax" },
    sparklineDrawNormalOnTop: { key: "sparkline-drawnormalontop" },
    sparklineXvalues: { key: "sparkline-xvalues" },
    sparklineChartRangeClip: { key: "sparkline-chartrangeclip" },
    sparklineChartRangeMinX: { key: "sparkline-chartrangeminx" },
    sparklineChartRangeMaxX: { key: "sparkline-chartrangemaxx" },
    sparklineDisableInteraction: { key: "sparkline-disableinteraction", type: "boolean" },
    sparklineDisableTooltips: { key: "sparkline-disabletooltips", type: "boolean" },
    sparklineOnHover: { key: "sparkline-on-hover" },
    sparklineDisableHighlight: { key: "sparkline-disablehighlight", type: "boolean" },
    sparklineHighlightLighten: { key: "sparkline-highlightlighten" },
    sparklineHighlightColor: { key: "sparkline-highlightcolor" },
    sparklineTooltipContainer: { key: "sparkline-tooltipcontainer" },
    sparklineTooltipClassname: { key: "sparkline-tooltipclassname" },
    sparklineTooltipFormat: { key: "sparkline-tooltipformat" },
    sparklineTooltipPrefix: { key: "sparkline-tooltipprefix" },
    sparklineTooltipSuffix: { key: "sparkline-tooltipsuffix" },
    sparklineTooltipSkipNull: { key: "sparkline-tooltipskipnull", type: "boolean" },
    sparklineTooltipValueLookups: { key: "sparkline-tooltipvaluelookups" },
    sparklineTooltipFormatFieldlist: { key: "sparkline-tooltipformatfieldlist" },
    sparklineTooltipFormatFieldlistKey: { key: "sparkline-tooltipformatfieldlistkey" },
    sparklineNumberFormatter: { key: "sparkline-numberformatter" },
    sparklineNumberDigitGroupSep: { key: "sparkline-numberdigitgroupsep" },
    sparklineNumberDecimalMark: { key: "sparkline-numberdecimalmark" },
    sparklineNumberDigitGroupCount: { key: "sparkline-numberdigitgroupcount" },
    sparklineAnimatedZooms: { key: "sparkline-animatedzooms", type: "boolean" },
    d3pieTitle: { key: "d3pie-title" },
    d3pieSubtitle: { key: "d3pie-subtitle" },
    d3pieFooter: { key: "d3pie-footer" },
    d3pieTitleColor: { key: "d3pie-title-color" },
    d3pieTitleFontsize: { key: "d3pie-title-fontsize" },
    d3pieTitleFontweight: { key: "d3pie-title-fontweight" },
    d3pieTitleFont: { key: "d3pie-title-font" },
    d3PieSubtitleColor: { key: "d3pie-subtitle-color" },
    d3PieSubtitleFontsize: { key: "d3pie-subtitle-fontsize" },
    d3PieSubtitleFontweight: { key: "d3pie-subtitle-fontweight" },
    d3PieSubtitleFont: { key: "d3pie-subtitle-font" },
    d3PieFooterColor: { key: "d3pie-footer-color" },
    d3PieFooterFontsize: { key: "d3pie-footer-fontsize" },
    d3PieFooterFontweight: { key: "d3pie-footer-fontweight" },
    d3PieFooterFont: { key: "d3pie-footer-font" },
    d3PieFooterLocation: { key: "d3pie-footer-location" },
    d3PiePieinnerradius: { key: "d3pie-pieinnerradius" },
    d3PiePieouterradius: { key: "d3pie-pieouterradius" },
    d3PieSortorder: { key: "d3pie-sortorder" },
    d3PieSmallsegmentgroupingEnabled: { key: "d3pie-smallsegmentgrouping-enabled", type: "boolean" },
    d3PieSmallsegmentgroupingValue: { key: "d3pie-smallsegmentgrouping-value" },
    d3PieSmallsegmentgroupingValuetype: { key: "d3pie-smallsegmentgrouping-valuetype" },
    d3PieSmallsegmentgroupingLabel: { key: "d3pie-smallsegmentgrouping-label" },
    d3PieSmallsegmentgroupingColor: { key: "d3pie-smallsegmentgrouping-color" },
    d3PieLabelsOuterFormat: { key: "d3pie-labels-outer-format" },
    d3PieLabelsOuterHidewhenlessthanpercentage: {
        key: "d3pie-labels-outer-hidewhenlessthanpercentage",
    },
    d3PieLabelsOuterPiedistance: { key: "d3pie-labels-outer-piedistance" },
    d3PieLabelsInnerFormat: { key: "d3pie-labels-inner-format" },
    d3PieLabelsInnerHidewhenlessthanpercentage: {
        key: "d3pie-labels-inner-hidewhenlessthanpercentage",
    },
    d3PieLabelsMainLabelColor: { key: "d3pie-labels-mainLabel-color" },
    d3PieLabelsMainLabelFont: { key: "d3pie-labels-mainLabel-font" },
    d3PieLabelsMainLabelFontsize: { key: "d3pie-labels-mainLabel-fontsize" },
    d3PieLabelsMainLabelFontweight: { key: "d3pie-labels-mainLabel-fontweight" },
    d3PieLabelsPercentageColor: { key: "d3pie-labels-percentage-color" },
    d3PieLabelsPercentageFont: { key: "d3pie-labels-percentage-font" },
    d3PieLabelsPercentageFontsize: { key: "d3pie-labels-percentage-fontsize" },
    d3PieLabelsPercentageFontweight: { key: "d3pie-labels-percentage-fontweight" },
    d3PieLabelsValueColor: { key: "d3pie-labels-value-color" },
    d3PieLabelsValueFont: { key: "d3pie-labels-value-font" },
    d3PieLabelsValueFontsize: { key: "d3pie-labels-value-fontsize" },
    d3PieLabelsValueFontweight: { key: "d3pie-labels-value-fontweight" },
    d3PieLabelsLinesEnabled: { key: "d3pie-labels-lines-enabled", type: "boolean" },
    d3PieLabelsLinesStyle: { key: "d3pie-labels-lines-style" },
    d3PieLabelsLinesColor: { key: "d3pie-labels-lines-color" },
    d3PieLabelsTruncationEnabled: { key: "d3pie-labels-truncation-enabled", type: "boolean" },
    d3PieLabelsTruncationTruncatelength: { key: "d3pie-labels-truncation-truncatelength" },
    d3PieMiscColorsSegmentstroke: { key: "d3pie-misc-colors-segmentstroke" },
    d3PieMiscGradientEnabled: { key: "d3pie-misc-gradient-enabled", type: "boolean" },
    d3PieMiscColorsPercentage: { key: "d3pie-misc-colors-percentage" },
    d3PieMiscGradientColor: { key: "d3pie-misc-gradient-color" },
    d3PieCssprefix: { key: "d3pie-cssprefix" },
    peityStrokeWidth: { key: "peity-strokewidth" },
    textOnlyDecimalPlaces: { key: "textonly-decimal-places" },
    textOnlyPrefix: { key: "textonly-prefix" },
    textOnlySuffix: { key: "textonly-suffix" },
});
export const getAttributesStatic = (node) => mapObjIndexed((attribute) => (attribute.type === "boolean"
    ? getDataAttributeBoolean(node, attribute.key, attribute.defaultValue) : getDataAttribute(node, attribute.key, attribute.defaultValue)), getAttributesMap()); // need to override because of broken Ramda typings
export const getAttributesDynamic = (node) => {
    const showValueOfAttribues = Array.from(node.attributes)
        .filter((attribute) => attribute.name.startsWith("data-show-value-of"))
        .map((attribute) => ({
        [attribute.name.replace("data-", "")]: attribute.value,
    }));
    const merged = mergeAll(showValueOfAttribues);
    return isEmpty(merged) ? undefined : merged;
};
export const getAttributes = (node) => {
    const attributesStatic = getAttributesStatic(node);
    const showValueOf = getAttributesDynamic(node);
    return { ...attributesStatic, showValueOf };
};
export const defaultAttributes = {
    legendPosition: initialLegendRight ? "right" : "bottom",
};
//# sourceMappingURL=transformDataAttributes.js.map