import React, { useMemo } from 'react';
import { LegendDisplayMode, UPlotChart, useTheme2, VizLayout, VizLegend, VizLegendItem } from '@grafana/ui';
import { PanelProps } from '@grafana/data';
import { XYChartOptions } from './models.gen';
import { prepData, prepScatter } from './scatter';

interface XYChartPanelProps extends PanelProps<XYChartOptions> {}

export const XYChartPanel: React.FC<XYChartPanelProps> = ({
  data,
  width,
  height,
  options,
  fieldConfig,
  timeRange,
  //onFieldConfigChange,
}) => {
  const theme = useTheme2();

  const info = useMemo(() => {
    console.log('prepScatter!');
    return prepScatter(options, data, theme, () => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data.structureRev, options]);

  // preps data in various shapes...aligned, stacked, merged, interpolated, etc..
  const scatterData = useMemo(() => {
    console.log('prepData!');
    return prepData(info, data.series);
  }, [info, data.series]);

  const legend = useMemo(() => {
    const items: VizLegendItem[] = [];
    for (const s of info.series) {
      const frame = s.frame(data.series);
      if (frame) {
        for (const item of s.legend(frame)) {
          items.push(item);
        }
      }
    }

    return (
      <VizLayout.Legend placement="bottom">
        <VizLegend placement="bottom" items={items} displayMode={LegendDisplayMode.List} />
      </VizLayout.Legend>
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [info]);

  if (info.error) {
    return (
      <div className="panel-empty">
        <p>{info.error}</p>
      </div>
    );
  }

  return (
    <VizLayout width={width} height={height} legend={legend}>
      {(vizWidth: number, vizHeight: number) => (
        // <pre style={{ width: vizWidth, height: vizHeight, border: '1px solid green', margin: '0px' }}>
        //   {JSON.stringify(scatterData, null, 2)}
        // </pre>
        <UPlotChart config={info.builder!} data={scatterData} width={vizWidth} height={vizHeight} timeRange={timeRange}>
          {/*children ? children(config, alignedFrame) : null*/}
        </UPlotChart>
      )}
    </VizLayout>
  );
};