import React from 'react';
import { MapPanel, LayerPanel } from './components';
import GraphModel from './graphModel';
import { GraphType, Layer } from './Types';
import { VISComponentType, VisualizationPropTypes } from '../../types';

export type MapProps = {};

export default function MapVis({ data, schema, settings }: VisualizationPropTypes) {
  const [layers, setLayers] = React.useState<Layer[]>([]);
  const [showFilter, setShowFilter] = React.useState<boolean>(false);

  let graph: GraphType | null = null;
  try {
    graph = React.useMemo(() => {
      const graphModel = new GraphModel();
      graphModel.consumeMessageFromBackend(data);
      return graphModel;
    }, [data]);
  } catch (error) {
    return <p>Error creating graph</p>;
  }

  return (
    <div className="flex flex-row justify-between overflow-hidden h-full w-full font-sans">
      <MapPanel graph={graph} layers={layers} showFilter={showFilter} setShowFilter={setShowFilter} />
      {/* <LayerPanel layers={layers} setLayers={setLayers} graphInfo={graph.getGraphInfo()} setShowFilter={setShowFilter} /> */}
    </div>
  );
}

export const MapComponent: VISComponentType = {
  displayName: 'Map',
  VIS: MapVis,
  settings: {},
};