import React from 'react';
import * as scale from 'd3-scale';
import { View } from 'react-native';
import { BarChart, XAxis, YAxis } from 'react-native-svg-charts';

import { useGraphData } from '../../../hooks/charts/useGraphData';
import ChartView from '../ChartView';
import { GraphData, YAxisProps } from '../graph-types';

import { CustomBars } from '../custom-bars';
import { CustomGrid } from '../custom-grid';
import { graphStyles } from '../../../styles';

interface Props {
  data: GraphData;
  height?: number;
  spacingInner?: number;
  spacingOuter?: number;
  contentInset?: { top: number; bottom: number };
  min?: number;
  numberOfTicks?: number;
  barColors?: Array<string>;
  useCommonScale?: boolean;
  yAxisProps?: YAxisProps;
}

export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...props }) => {
  if (!data || typeof data !== 'object') return null; // TODO: replace when we have error/loading context from useQueryHandler
  const {
    xValues,
    yData,
    yAxisRightLabels,
    yAxisLeftLabels,
    defaultProps: {
      height,
      spacingInner,
      spacingOuter,
      contentInset,
      min,
      numberOfTicks,
      barColors,
      yAxisProps: {
        maxLeftYAxisValue,
        maxRightYAxisValue,
        formatRightYAxisLabel,
        formatLeftYAxisLabel
      }
    }
  } = useGraphData(data, props, useCommonScale);

  return (
    <ChartView>
      <View style={[graphStyles.rowContainer, { height: height }]}>
        <YAxis
          data={yAxisLeftLabels.values}
          contentInset={contentInset}
          svg={graphStyles.yAxisFontStyle}
          style={graphStyles.yAxisLeftPadding}
          min={min}
          max={maxLeftYAxisValue}
          numberOfTicks={numberOfTicks}
          formatLabel={formatLeftYAxisLabel}
        />
        <View style={graphStyles.flex}>
          <BarChart
            style={graphStyles.flex}
            data={yData}
            gridMin={min}
            svg={{ stroke: 'transparent' }} // might want to do the transparent from here?
            numberOfTicks={numberOfTicks} // rethink numberOfTicks, it should be determined automatically if we do our y axis scaling proper
            yAccessor={({ item }) => (item as unknown as { value: number }).value}
            contentInset={contentInset}
            spacingInner={spacingInner}
            spacingOuter={spacingOuter}
          >
            <CustomGrid />
            <CustomBars barData={yData} xValues={xValues} barColors={barColors} />
          </BarChart>
          <XAxis
            data={xValues.map((_, index) => index)}
            formatLabel={(_, index) => xValues[index]}
            style={graphStyles.xAxisMarginTop}
            svg={graphStyles.xAxisFontStyle}
            scale={scale.scaleBand}
          />
        </View>
        <YAxis
          data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
          contentInset={contentInset}
          svg={graphStyles.yAxisFontStyle}
          style={graphStyles.yAxisRightPadding}
          min={min}
          max={maxRightYAxisValue}
          numberOfTicks={numberOfTicks}
          formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
        />
      </View>
    </ChartView>
  );
};

export default BarGraph;