import type { Highcharts } from "../Highcharts"
import { DEFAULT_DATE_TIME_LABEL_FORMATS } from "./constants"

export const DEFAULT_HIGHCHART_OPTIONS: Highcharts.Options = {
  title: {
    text: "",
  },
  credits: {
    enabled: false, // Disable highcharts.com watermark
  },
  time: {
    timezone: "UTC",
  },
  boost: {
    useGPUTranslations: true,
  },
  // silences the warning ~ we can re-consdier adding this, but its quite "heavyweight": https://www.highcharts.com/docs/accessibility/accessibility-module
  accessibility: {
    enabled: false,
  },
}

export const INTERACTIVE_CHART_OPTIONS: Highcharts.ChartOptions = {
  zooming: {
    type: "x",
    pinchType: "x",
  },
  panKey: "shift",
  panning: {
    enabled: true,
  },
}

export const DEFAULT_MARKER_STYLES: Highcharts.PointMarkerOptionsObject = {
  fillColor: "transparent",
  radius: 3,
  lineWidth: 1.25,
  lineColor: "rgb(var(--color-blue-2) / 50%)",
  states: {
    hover: {
      radius: 4,
      fillColor: "rgb(var(--color-blue-2))",
      lineColor: "rgb(var(--color-blue-2))",
    },
  },
  symbol: "circle",
}

export const OUTLIER_MARKER_STYLES: Highcharts.PointMarkerOptionsObject = {
  fillColor: "transparent",
  radius: 3,
  lineWidth: 1.25,
  lineColor: "rgb(var(--color-warning))",
  states: {
    hover: {
      radius: 4,
      fillColor: "rgb(var(--color-warning))",
      lineColor: "rgb(var(--color-warning))",
    },
  },
}

type CreateChartOptions = Highcharts.ChartOptions & {
  interactive?: boolean
  allowZoom?: boolean
}

export const createChartOptions = ({
  interactive = false,
  allowZoom = true,
  zooming,
  ...overrides
}: CreateChartOptions = {}): Highcharts.ChartOptions => ({
  spacingLeft: 4,
  spacingRight: 4,
  spacingTop: 8,
  spacingBottom: 8,
  backgroundColor: "", // transparent
  style: {
    fontFamily: "'Source Code Pro', monospace",
    color: "rgb(var(--color-text-secondary))",
  },
  borderWidth: 0,
  ...(interactive ? INTERACTIVE_CHART_OPTIONS : {}),
  zooming: {
    ...zooming,
    ...(interactive ? INTERACTIVE_CHART_OPTIONS.zooming : {}),
    type: interactive && allowZoom ? (zooming?.type ?? "x") : undefined,
    resetButton: {
      theme: {
        style: {
          display: "none", // always hide default reset zoom button
        },
      },
    },
  },
  ...overrides,
})

type CreateTooltipOptions = Highcharts.TooltipOptions

export const createTooltipOptions = ({
  ...overrides
}: CreateTooltipOptions = {}): Highcharts.TooltipOptions => ({
  // Options - Enable tooltip (for shared behaviour) but hide it
  enabled: true,
  shared: true,
  style: {
    display: "none",
  },
  followTouchMove: true,
  // Overrides
  ...overrides,
})

const crosshair: Highcharts.AxisCrosshairOptions = {
  snap: false,
  dashStyle: "LongDash",
}

export type CreateXAxisOptions = Highcharts.XAxisOptions & {
  axisTitle?: string
}

export const createXAxisOptions = ({
  axisTitle,
  ...overrides
}: CreateXAxisOptions = {}): Highcharts.XAxisOptions => ({
  crosshair,
  lineColor: "var(--color-border-1)",
  tickColor: "var(--color-border-1)",
  dateTimeLabelFormats: DEFAULT_DATE_TIME_LABEL_FORMATS,
  ...overrides,
  title: {
    text: axisTitle ?? null,
    style: {
      fontWeight: "600",
      color: "rgb(var(--color-text-primary))",
      fontSize: "14px",
    },
    margin: 16,
    ...overrides.title,
  },
  labels: {
    style: {
      fontSize: "10px",
      color: "rgb(var(--color-text-secondary)",
      ...overrides.labels?.style,
    },
    ...overrides.labels,
  },
})

export type CreateYAxisOptions = Highcharts.YAxisOptions & {
  axisTitle?: string
}

export const createYAxisOptions = ({
  axisTitle,
  ...overrides
}: CreateYAxisOptions = {}): Highcharts.YAxisOptions => ({
  crosshair,
  gridLineColor: "var(--color-border-1)",
  ...overrides,
  title: {
    text: axisTitle ?? null,
    style: {
      fontWeight: "600",
      color: "rgb(var(--color-text-primary))",
      fontSize: "14px",
    },
    margin: 16,
    ...overrides.title,
  },
  labels: {
    style: {
      fontSize: "10px",
      color: "rgb(var(--color-text-secondary)",
      ...overrides.labels?.style,
    },
    ...overrides.labels,
  },
})

type CreateSeriesOptions =
  | Highcharts.SeriesColumnOptions
  | Highcharts.SeriesSplineOptions
  | Highcharts.SeriesAreasplineOptions
  | Highcharts.SeriesScatterOptions
  | Highcharts.SeriesAreaOptions
  | Highcharts.SeriesLineOptions

export const createSeriesOptions = (
  overrides: CreateSeriesOptions,
): Highcharts.SeriesOptionsType => {
  const options = {
    // options
    showInLegend: false,
    // styles
    color: "var(--color-border-1)",
    borderColor: "var(--color-border-1)",
    animation: false,

    ...overrides,
    marker: {
      ...DEFAULT_MARKER_STYLES,
      ...("marker" in overrides ? overrides.marker : {}),
    },
  }

  return options
}

type CreateLegendOptions = Highcharts.LegendOptions

export const createLegendOptions = (
  overrides: CreateLegendOptions,
): Highcharts.LegendOptions => {
  return {
    itemStyle: {
      fontSize: "14px",
      fontWeight: "600",
      color: "rgb(var(--color-text-primary))",
    },
    itemHoverStyle: {
      color: "rgb(var(--color-text-secondary))",
    },
    ...overrides,
  }
}