import React from "react";
import { format } from "d3-format";
import { View } from "@deck.gl/core/typed";
import { ContinuousLegend } from "@emerson-eps/color-tables";
import DeckGLMap from "./DeckGLMap";
import ViewFooter from "./components/ViewFooter";
export default {
    component: DeckGLMap,
    title: "DeckGLMap",
};
const defaultWellsLayer = {
    "@@type": "WellsLayer",
    data: "@@#resources.wellsData",
};
const defaultProps = {
    id: "volve-wells",
    resources: {
        wellsData: "./volve_wells.json",
    },
    bounds: [432150, 6475800, 439400, 6481500],
    layers: [defaultWellsLayer],
};
const Template = (args) => (React.createElement(DeckGLMap, Object.assign({}, args)));
function mdTooltip(info) {
    var _a, _b;
    if (!info.picked)
        return null;
    const value = (_b = (_a = info) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[0].value;
    if (!value)
        return null;
    const f = format(".2f");
    const niceValue = f(+value);
    return "MD: " + niceValue;
}
export const TooltipApi = Template.bind({});
TooltipApi.args = Object.assign(Object.assign({}, defaultProps), { layers: [
        Object.assign(Object.assign({}, defaultWellsLayer), { lineStyle: { width: 7 } }),
    ], getTooltip: mdTooltip, bounds: [433000, 6476000, 439000, 6480000] });
TooltipApi.parameters = {
    docs: {
        description: {
            story: "Example of overriding the default tooltip, showing measured depth (MD) instead of the default bahaviour, which is to show the well name.",
        },
        inlineStories: false,
        iframeHeight: 500,
    },
};
export const TooltipStyle = Template.bind({});
const processPropInfo = (properties, filter) => {
    if (!properties) {
        return "";
    }
    let outputString = "";
    if (typeof filter == "boolean") {
        if (filter) {
            properties.forEach((ppobj) => {
                outputString += `\n${ppobj["name"]} : ${ppobj["value"]}`;
            });
        }
    }
    else {
        // filter is not boolean - thus it is a string array and we should check each property
        properties.forEach((ppobj) => {
            if (filter.includes(ppobj["name"])) {
                outputString += `\n${ppobj["name"]} : ${ppobj["value"]}`;
            }
        });
    }
    return outputString;
};
const tooltipImpFunc = (info) => {
    if (!info.picked || !info.layer) {
        return null;
    }
    const outputObject = {};
    const layerName = info.layer.constructor.name;
    let outputString = "";
    if (layerName === "Map3DLayer") {
        const layerProps = info.layer
            .props;
        const layerName = layerProps.name;
        const properties = info.properties;
        outputString += `Property: ${layerName}`;
        outputString += processPropInfo(properties, true);
    }
    else if (layerName === "WellsLayer") {
        const wellsPickInfo = info;
        const wellsPickInfoObject = info.object;
        const wellProperties = wellsPickInfoObject.properties;
        const name = wellProperties.name;
        outputString += `Well: ${name || ""}`;
        if (wellsPickInfo.featureType !== "points") {
            outputString += processPropInfo(wellsPickInfo.properties, true);
        }
    }
    outputObject["text"] = outputString;
    outputObject["style"] = { color: "yellow" };
    return outputObject;
};
TooltipStyle.args = Object.assign(Object.assign({}, defaultProps), { layers: [
        Object.assign(Object.assign({}, defaultWellsLayer), { lineStyle: { width: 7 } }),
    ], getTooltip: tooltipImpFunc, bounds: [433000, 6476000, 439000, 6480000] });
TooltipStyle.parameters = {
    docs: {
        description: {
            story: "Example of overriding tooltip style.",
        },
        inlineStories: false,
        iframeHeight: 500,
    },
};
const CustomTemplate = (args) => {
    const [state, setState] = React.useState(args.cameraPosition);
    const getCameraPosition = React.useCallback((input) => {
        setState(input);
        return input;
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(DeckGLMap, Object.assign({}, args, { cameraPosition: args.cameraPosition, getCameraPosition: getCameraPosition })),
        React.createElement("div", { style: {
                position: "absolute",
                marginLeft: 200,
            } },
            React.createElement("div", null,
                "zoom: ", state === null || state === void 0 ? void 0 :
                state.zoom),
            React.createElement("div", null,
                "rotationX: ", state === null || state === void 0 ? void 0 :
                state.rotationX),
            React.createElement("div", null,
                "rotationOrbit: ", state === null || state === void 0 ? void 0 :
                state.rotationOrbit),
            React.createElement("div", null,
                "targetX: ", state === null || state === void 0 ? void 0 :
                state.target[0]),
            React.createElement("div", null,
                "targetY: ", state === null || state === void 0 ? void 0 :
                state.target[1]))));
};
export const customizedCameraPosition = CustomTemplate.bind({});
const cameraPosition = {
    target: [437500, 6475000],
    zoom: -5.0,
    rotationX: 90,
    rotationOrbit: 0,
};
customizedCameraPosition.args = Object.assign(Object.assign({}, defaultProps), { cameraPosition });
const mapLayer = {
    "@@type": "MapLayer",
    id: "hugin",
    meshUrl: "hugin_depth_25_m.float32",
    frame: {
        origin: [432150, 6475800],
        count: [291, 229],
        increment: [25, 25],
        rotDeg: 0,
    },
    propertiesUrl: "kh_netmap_25_m.float32",
    contours: [0, 100],
    material: false,
};
const MultiViewAnnotationTemplate = (args) => (React.createElement(DeckGLMap, Object.assign({}, args),
    // @ts-expect-error This is demonstrated to work with js, but with ts it gives error
    React.createElement(View, { id: "view_1" },
        React.createElement(ContinuousLegend, { min: -3071, max: 41048 }),
        React.createElement(ViewFooter, null, "kH netmap")),
    // @ts-expect-error This is demonstrated to work with js, but with ts it gives error
    React.createElement(View, { id: "view_2" },
        React.createElement(ContinuousLegend, { min: 2725, max: 3396 }),
        React.createElement(ViewFooter, null, "Hugin"))));
export const MultiViewAnnotation = MultiViewAnnotationTemplate.bind({});
MultiViewAnnotation.args = {
    id: "multi_view_annotation",
    legend: {
        visible: true,
    },
    layers: [
        mapLayer,
        Object.assign(Object.assign({}, mapLayer), { id: "kh_netmap", propertiesUrl: "hugin_depth_25_m.float32" }),
    ],
    views: {
        layout: [1, 2],
        showLabel: true,
        viewports: [
            {
                id: "view_1",
                layerIds: ["hugin"],
            },
            {
                id: "view_2",
                layerIds: ["kh_netmap"],
            },
        ],
    },
};
const wellsLayerNoDepthTest = Object.assign(Object.assign({}, defaultWellsLayer), { id: "wells-layer-no-depth-test", depthTest: false });
export const DepthTest = (args) => {
    const props = Object.assign(Object.assign({}, args), { layers: [mapLayer, defaultWellsLayer, wellsLayerNoDepthTest] });
    return (React.createElement(React.Fragment, null,
        React.createElement("div", null,
            React.createElement(DeckGLMap, Object.assign({}, props))),
        React.createElement("h4", null, "View on the right depthTest for the wells layer property is set to false and wells layer is given last so that it will be painted on top. On the left parts of the wells are hidden beneath the surface.")));
};
DepthTest.args = {
    id: "DepthTest",
    resources: {
        wellsData: "./volve_wells.json",
    },
    views: {
        layout: [1, 2],
        viewports: [
            {
                id: "view_1",
                layerIds: ["hugin", "wells-layer"],
                show3D: false,
                isSync: true,
            },
            {
                id: "view_2",
                layerIds: ["hugin", "wells-layer-no-depth-test"],
                show3D: false,
                isSync: true,
            },
        ],
    },
};
DepthTest.parameters = {
    docs: {
        description: {
            story: "Example using the depthTest property. If this is set to false it will disable depth testing for the layer",
        },
    },
};
//# sourceMappingURL=DeckGLMap.stories.js.map