import { ChartProps } from '@superset-ui/core';
import { flatMap } from 'lodash';

interface Value {
  [key: string]: unknown;
}

type Key = keyof Value;

interface DataRow {
  key: string[];
  values: Value[];
}

export default function transformProps(chartProps: ChartProps) {
  const { width, height, formData, queriesData } = chartProps;
  const {
    colorScheme,
    maxBubbleSize,
    showLegend,
    xAxisFormat,
    xAxisLabel,
    // TODO: These fields are not supported yet
    // xAxisShowminmax,
    // xLogScale,
    yAxisLabel,
    yAxisFormat,
    // TODO: These fields are not supported yet
    // yAxisShowminmax,
    // yLogScale,
  } = formData;
  const x = formData.x as Key;
  const y = formData.y as Key;
  const series = formData.series as Key;
  const size = formData.size as Key;
  const entity = formData.entity as Key;
  const data = queriesData[0].data as DataRow[];

  return {
    data: flatMap(
      data.map((row: DataRow) =>
        row.values.map(v => ({
          [x]: v[x],
          [y]: v[y],
          [series]: v[series],
          [size]: v[size],
          [entity]: v[entity],
        })),
      ),
    ),
    width,
    height,
    encoding: {
      x: {
        field: x,
        type: 'quantitive',
        format: xAxisFormat,
        scale: {
          type: 'linear',
        },
        axis: {
          orient: 'bottom',
          title: xAxisLabel,
        },
      },
      y: {
        field: y,
        type: 'quantitative',
        format: yAxisFormat,
        scale: {
          type: 'linear',
        },
        axis: {
          orient: 'left',
          title: yAxisLabel,
        },
      },
      size: {
        field: size,
        type: 'quantitative',
        scale: {
          type: 'linear',
          range: [0, maxBubbleSize],
        },
      },
      fill: {
        field: series,
        type: 'nominal',
        scale: {
          scheme: colorScheme,
        },
        legend: showLegend,
      },
      group: [{ field: entity }],
    },
  };
}