import React from 'react';
import { MuiVegaLite } from '@material-vega/material-ui';
import { useTheme } from '@material-ui/core';
import { RatioVisulization } from './RatioVisulization';
import { GaugeGraph } from './GaugeGraph';
export const AmbientVisualizer = ({ values, visualization, verticalBarWidth = 70, verticalBarColor = 'primary', verticalBarBand = 0.9, verticalBarBandThin = 0.1, styleThin, verticalBarXfield = 'category', verticalBarXtype = 'nominal', verticalBarYfield = 'amount', verticalBarYtype = 'quantitative', horizontalBarWidth = 265, horizontalBarHeight = 35, horizontalBarColor = 'primary', horizontalBarBand = 0.7, horizontalBarBandThin = 0.1, horizontalBarXfield = 'amount', horizontalBarXtype = 'quantitative', horizontalBarYfield = 'category', horizontalBarYtype = 'nominal', areaLineHeight = 150, areaLineWidth = 350, areaLineXtimeUnit = 'yearmonth', areaLineXfield = 'date', areaLineXtype = 'temporal', areaLineXaxisFormat = '%Y', areaLineYaggergate = 'sum', areaLineYfield = 'count', areaLineType = 'quantitative', layeredChartLayer, donutChartInnerRadius = 50, pieThetaField, pieThetaType = 'quantitative', pieColorField, pieColorType = 'nominal', tooltip, encodingTooltip = null, chartWidth, chartHeight, xTitle, yTitle, linePoint, lineXtimeUnit, lineXfield, lineXtype, lineYaggergate, lineYfield, lineYtype, lineColorField, lineColorType = 'nominal', vegaLiteSpecProps = {}, gaugeTitle = '', gaugeUnitLabel = '', gaugeLegend = '', gaugeShowTicks = false, gaugeTicksNumber, gaugeBackgroundColor = 'secondary', gaugeFillColor = 'warning', gaugeValue = 0, gaugeMinValue = 0, gaugeMaxValue = 100, }) => {
    const theme = useTheme();
    const verticalBar = (React.createElement(MuiVegaLite, { variant: "verticalBarChart", actions: false, spec: Object.assign({ $schema: 'https://vega.github.io/schema/vega-lite/v4.json', width: { step: verticalBarWidth }, data: {
                values: values,
            }, mark: 'bar', encoding: {
                color: {
                    value: verticalBarColor === 'primary'
                        ? theme.palette.primary.main
                        : theme.palette.secondary.main,
                },
                x: {
                    field: verticalBarXfield,
                    type: verticalBarXtype,
                    axis: {
                        ticks: false,
                    },
                    band: styleThin ? verticalBarBandThin : verticalBarBand,
                },
                y: {
                    field: verticalBarYfield,
                    type: verticalBarYtype,
                    axis: {
                        format: '',
                    },
                },
                tooltip: encodingTooltip,
            } }, vegaLiteSpecProps) }));
    const horizontalBar = (React.createElement(MuiVegaLite, { variant: "horizontalBarChart", spec: Object.assign({ $schema: 'https://vega.github.io/schema/vega-lite/v4.json', height: { step: horizontalBarHeight }, width: horizontalBarWidth, data: {
                values: values,
            }, mark: 'bar', encoding: {
                color: { value: theme.palette.secondary.main },
                // color: {"value": horizontalBarColor === 'primary' ? theme.palette.primary.main : theme.palette.secondary.main},
                x: {
                    field: horizontalBarXfield,
                    type: horizontalBarXtype,
                    axis: {
                        format: 's',
                    },
                },
                y: {
                    field: horizontalBarYfield,
                    type: horizontalBarYtype,
                    band: styleThin ? horizontalBarBandThin : horizontalBarBand,
                },
                tooltip: encodingTooltip,
            } }, vegaLiteSpecProps) }));
    const areaLine = (React.createElement(MuiVegaLite, { variant: "areaLineChart", spec: Object.assign({ $schema: 'https://vega.github.io/schema/vega-lite/v4.json', width: areaLineWidth, height: areaLineHeight, data: {
                values: values,
            }, mark: 'area', encoding: {
                x: {
                    timeUnit: areaLineXtimeUnit,
                    field: areaLineXfield,
                    type: areaLineXtype,
                    axis: { format: areaLineXaxisFormat },
                },
                y: {
                    aggregate: areaLineYaggergate,
                    field: areaLineYfield,
                    type: areaLineType,
                },
                tooltip: encodingTooltip,
            } }, vegaLiteSpecProps) }));
    const numberRatio = (React.createElement(RatioVisulization
    // @todo Update for production use.
    , { 
        // @todo Update for production use.
        m: 15, n: 1 }));
    const layeredChart = (React.createElement(MuiVegaLite, { variant: "verticalBarChart", actions: false, spec: Object.assign({ $schema: 'https://vega.github.io/schema/vega-lite/v5.json', width: chartWidth, height: chartHeight, autosize: 'fit', data: values
                ? {
                    values: values,
                }
                : null, layer: layeredChartLayer, config: {
                legend: {
                    orient: 'bottom',
                    layout: { bottom: { anchor: 'middle' } },
                },
            } }, vegaLiteSpecProps) }));
    const pie = (React.createElement(MuiVegaLite, { variant: visualization === 'pie' ? 'pieChart' : 'donutChart', actions: false, spec: Object.assign({ $schema: 'https://vega.github.io/schema/vega-lite/v5.json', width: chartWidth, height: chartHeight, data: {
                values: values,
            }, config: {
                legend: {
                    orient: 'bottom',
                    layout: { bottom: { anchor: 'middle' } },
                },
            }, mark: {
                type: 'arc',
                innerRadius: visualization === 'pie' ? 0 : donutChartInnerRadius,
                tooltip: tooltip,
            }, encoding: {
                theta: { field: pieThetaField, type: pieThetaType },
                color: { field: pieColorField, type: pieColorType },
                tooltip: encodingTooltip,
            } }, vegaLiteSpecProps) }));
    const line = (React.createElement(MuiVegaLite, { variant: "lineChart", actions: false, spec: Object.assign({ $schema: 'https://vega.github.io/schema/vega-lite/v5.json', width: chartWidth, height: chartHeight, autosize: 'fit', data: {
                values: values,
            }, mark: {
                type: 'line',
                point: linePoint,
                tooltip: tooltip,
            }, config: {
                legend: {
                    orient: 'bottom',
                    layout: { bottom: { anchor: 'middle' } },
                },
            }, encoding: {
                x: {
                    field: lineXfield,
                    type: lineXtype,
                    timeUnit: lineXtimeUnit,
                    title: xTitle,
                },
                y: {
                    field: lineYfield,
                    type: lineYtype,
                    title: yTitle,
                    aggregate: lineYaggergate,
                },
                color: lineColorField
                    ? {
                        field: lineColorField,
                        type: lineColorType,
                    }
                    : null,
                tooltip: encodingTooltip,
            } }, vegaLiteSpecProps) }));
    const gauge = (React.createElement(GaugeGraph, { title: gaugeTitle, unitLabel: gaugeUnitLabel, legend: gaugeLegend, showTicks: gaugeShowTicks, ticksNumber: gaugeTicksNumber, backgroundColor: gaugeBackgroundColor, fillColor: gaugeFillColor, value: gaugeValue, minValue: gaugeMinValue, maxValue: gaugeMaxValue, width: chartWidth, height: chartHeight }));
    let type = '';
    switch (visualization) {
        case 'verticalBar':
            type = verticalBar;
            break;
        case 'horizontalBar':
            type = horizontalBar;
            break;
        case 'areaLine':
            type = areaLine;
            break;
        case 'numberRatio':
            type = numberRatio;
            break;
        case 'layeredChart':
            type = layeredChart;
            break;
        case 'donut':
            type = pie;
            break;
        case 'pie':
            type = pie;
            break;
        case 'line':
            type = line;
            break;
        case 'gauge':
            type = gauge;
            break;
        default:
    }
    return type;
};
//# sourceMappingURL=AmbientVisualizer.js.map