import React, { useMemo } from 'react';
import * as UdpCharts from './amcharts';
import { useUser } from '../../utilities/auth/useUser';
import { useAxiosGet } from '../../utilities/useAxiosGet';
import { ConfigService } from '../../configService';
const capitilizeFirstLetter = (s) => {
    var _a, _b, _c, _d;
    return ((_c = (_b = (_a = s === null || s === void 0 ? void 0 : s.charAt) === null || _a === void 0 ? void 0 : _a.call(s, 0)) === null || _b === void 0 ? void 0 : _b.toUpperCase) === null || _c === void 0 ? void 0 : _c.call(_b)) + ((_d = s === null || s === void 0 ? void 0 : s.slice) === null || _d === void 0 ? void 0 : _d.call(s, 1));
};
const decapitilizeFirstLetter = (s) => {
    var _a, _b, _c, _d;
    return ((_c = (_b = (_a = s === null || s === void 0 ? void 0 : s.charAt) === null || _a === void 0 ? void 0 : _a.call(s, 0)) === null || _b === void 0 ? void 0 : _b.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(_b)) + ((_d = s === null || s === void 0 ? void 0 : s.slice) === null || _d === void 0 ? void 0 : _d.call(s, 1));
};
function getAggregateValue(data, key) {
    var _a, _b;
    return (_b = (_a = data === null || data === void 0 ? void 0 : data.aggregateResults) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[key];
}
/**
 * InsightRenderer component
 *
 * This component is responsible for rendering insights based on the provided props.
 *
 * @prop {Insight} `insight` - The insight metadata
 * @prop {any} `data` - Search results associated with the insight
 * @prop {string} `insightId` - InsightId, if included the component will get the data from server
 * @returns {JSX.Element} - The rendered insight component.
 */
export const InsightRenderer = (props) => {
    const { insight: insightProp, data, insightId } = props;
    const user = useUser();
    const [{ data: loadedInsight }] = useAxiosGet(ConfigService.integrationV2ApiUrl, `Insight/${insightId}/Full`, {}, !insightId || !user);
    // Use the insight passed in or the insightId
    const insight = useMemo(() => {
        if (!!insightId)
            return loadedInsight;
        else
            return insightProp;
    }, [loadedInsight, insightId, insightProp]);
    // determine chart component
    const Chart = useMemo(() => {
        var _a, _b, _c, _d;
        if (!((_a = insight === null || insight === void 0 ? void 0 : insight.insightInsightType) === null || _a === void 0 ? void 0 : _a.properties))
            return null;
        let properties;
        if (typeof ((_b = insight === null || insight === void 0 ? void 0 : insight.insightInsightType) === null || _b === void 0 ? void 0 : _b.properties) === 'string') {
            properties = JSON.parse((_c = insight === null || insight === void 0 ? void 0 : insight.insightInsightType) === null || _c === void 0 ? void 0 : _c.properties);
        }
        else {
            properties = (_d = insight === null || insight === void 0 ? void 0 : insight.insightInsightType) === null || _d === void 0 ? void 0 : _d.properties;
        }
        // @ts-ignore
        return UdpCharts === null || UdpCharts === void 0 ? void 0 : UdpCharts[properties === null || properties === void 0 ? void 0 : properties.component];
    }, [insight === null || insight === void 0 ? void 0 : insight.insightInsightType]);
    const kpis = useMemo(() => {
        var _a, _b;
        if (insight == null)
            return undefined;
        return (_b = (_a = insight === null || insight === void 0 ? void 0 : insight.insightInsightKpi) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (kpi) => {
            var _a;
            var _b, _c, _d;
            const kpiField = typeof kpi.field === 'object' ? kpi.field : JSON.parse(kpi.field);
            console.log(kpiField);
            return {
                label: kpi.label,
                active: kpi.active,
                value: getAggregateValue(data, `${(_c = decapitilizeFirstLetter((_b = kpiField.property) !== null && _b !== void 0 ? _b : '')) !== null && _c !== void 0 ? _c : ''}${capitilizeFirstLetter((_d = (_a = kpiField.operation) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _d !== void 0 ? _d : '')}`)
            };
        });
    }, [data, insight === null || insight === void 0 ? void 0 : insight.insightInsightKpi]);
    const dataConfig = useMemo(() => {
        var _a, _b, _c, _d;
        var _e, _f;
        if (insight == null)
            return null;
        const dataMapping = typeof insight.dataMapping === 'object'
            ? insight.dataMapping
            : JSON.parse((_e = insight.dataMapping) !== null && _e !== void 0 ? _e : '{}');
        const dataFields = typeof ((_a = insight.insightInsightType) === null || _a === void 0 ? void 0 : _a.dataFields) === 'object'
            ? (_b = insight.insightInsightType) === null || _b === void 0 ? void 0 : _b.dataFields
            : JSON.parse((_f = (_c = insight.insightInsightType) === null || _c === void 0 ? void 0 : _c.dataFields) !== null && _f !== void 0 ? _f : '{}');
        return (_d = dataFields === null || dataFields === void 0 ? void 0 : dataFields.reduce) === null || _d === void 0 ? void 0 : _d.call(dataFields, (value, field) => {
            var _a, _b;
            var _c, _d;
            const fieldValue = (_b = (_a = dataMapping === null || dataMapping === void 0 ? void 0 : dataMapping.find) === null || _a === void 0 ? void 0 : _a.call(dataMapping, (dm) => dm.name === field.name)) === null || _b === void 0 ? void 0 : _b.value;
            if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.operation) != undefined) {
                value[field.name] =
                    decapitilizeFirstLetter(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.name) + fieldValue.operation;
            }
            else {
                // @ts-ignore
                value[field.name] = (_d = (_c = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.alias) !== null && _c !== void 0 ? _c : fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.name) !== null && _d !== void 0 ? _d : fieldValue;
            }
            return value;
        }, {});
    }, [insight === null || insight === void 0 ? void 0 : insight.dataMapping, insight === null || insight === void 0 ? void 0 : insight.insightInsightType]);
    const combinedData = useMemo(() => {
        var _a;
        if ((data === null || data === void 0 ? void 0 : data.aggregateResults) == null || ((_a = data === null || data === void 0 ? void 0 : data.aggregateResults) === null || _a === void 0 ? void 0 : _a.length) === 0)
            return data === null || data === void 0 ? void 0 : data.pageList;
        return data === null || data === void 0 ? void 0 : data.pageList.map((page, i) => {
            var _a;
            return (Object.assign(Object.assign({}, page), (_a = data === null || data === void 0 ? void 0 : data.aggregateResults) === null || _a === void 0 ? void 0 : _a[i]));
        });
    }, [data]);
    if (Chart == null)
        return null;
    return (React.createElement(Chart, Object.assign({ data: combinedData, title: insight === null || insight === void 0 ? void 0 : insight.title, subheader: insight === null || insight === void 0 ? void 0 : insight.subheader }, dataConfig, { kpis: kpis === null || kpis === void 0 ? void 0 : kpis.filter((kpi) => kpi.active) })));
};
//# sourceMappingURL=InsightRenderer.js.map