/* eslint-disable react/jsx-sort-default-props */
/* eslint-disable react/sort-prop-types */
/* eslint-disable react/jsx-handler-names */
/* eslint-disable react/forbid-prop-types */
/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState, } from 'react';
import { isEqual } from 'lodash';
import { StaticMap } from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import { styled, usePrevious } from '@superset-ui/core';
import Tooltip from './components/Tooltip';
import 'mapbox-gl/dist/mapbox-gl.css';
const TICK = 250; // milliseconds
export const DeckGLContainer = memo(forwardRef((props, ref) => {
    const [tooltip, setTooltip] = useState(null);
    const [lastUpdate, setLastUpdate] = useState(null);
    const [viewState, setViewState] = useState(props.viewport);
    const prevViewport = usePrevious(props.viewport);
    useImperativeHandle(ref, () => ({ setTooltip }), []);
    const tick = useCallback(() => {
        // Rate limiting updating viewport controls as it triggers lots of renders
        if (lastUpdate && Date.now() - lastUpdate > TICK) {
            const setCV = props.setControlValue;
            if (setCV) {
                setCV('viewport', viewState);
            }
            setLastUpdate(null);
        }
    }, [lastUpdate, props.setControlValue, viewState]);
    useEffect(() => {
        const timer = setInterval(tick, TICK);
        return clearInterval(timer);
    }, [tick]);
    useEffect(() => {
        if (!isEqual(props.viewport, prevViewport)) {
            setViewState(props.viewport);
        }
    }, [prevViewport, props.viewport]);
    const onViewStateChange = useCallback(({ viewState }) => {
        setViewState(viewState);
        setLastUpdate(Date.now());
    }, []);
    const layers = useCallback(() => {
        // Support for layer factory
        if (props.layers.some(l => typeof l === 'function')) {
            return props.layers.map(l => typeof l === 'function' ? l() : l);
        }
        return props.layers;
    }, [props.layers]);
    const { children = null, height, width } = props;
    return (<>
        <div style={{ position: 'relative', width, height }}>
          <DeckGL controller width={width} height={height} layers={layers()} viewState={viewState} glOptions={{ preserveDrawingBuffer: true }} onViewStateChange={onViewStateChange}>
            <StaticMap preserveDrawingBuffer mapStyle={props.mapStyle || 'light'} mapboxApiAccessToken={props.mapboxApiAccessToken}/>
          </DeckGL>
          {children}
        </div>
        <Tooltip tooltip={tooltip}/>
      </>);
}));
export const DeckGLContainerStyledWrapper = styled(DeckGLContainer) `
  .deckgl-tooltip > div {
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;
//# sourceMappingURL=DeckGLContainer.jsx.map