import React from 'react'
import { Line, LineChart, ResponsiveContainer, YAxis } from 'recharts'

import { useIsMobileView } from '../../../hooks/useIsMobileView/useIsMobileView'

/** Recharts v3 dimension type - accepts number or percentage string like '100%' */
type DimensionValue = number | `${number}%`

type SparkLineType = {
  /** ClassName to be applied to the ResponsiveContainer */
  containerClassName?: string
  /** Object key where the data points are stored */
  dataKey: string
  /** The graph data (example: [{dataKey: number, date: 'YYYY-MM-DD', threshold: dashed_line_value}] ) */
  graphData: Array<Record<string, unknown>>
  /** Props to be passed to the Line component {accepts all Rechart `Line` Props} */
  lineProps?: React.ComponentPropsWithoutRef<typeof Line>
  /** Props to be passed to the LineChart component {accepts all Rechart `LineChart` Props} */
  lineChartProps?: React.ComponentPropsWithoutRef<typeof LineChart>
  /** Specifies the line color. Accepted values are 'green', 'red', 'blue', or 'purple' (default is 'blue'). The dark variant of the selected color will be applied. */
  strokeColor?: 'red' | 'green' | 'blue' | 'purple'
  /** Color of the dashed threshold line; expect 'green', 'red', or 'blue' (default: blue) */
  thresholdColor?: string
  /** Object key where the threshold data value is stored */
  thresholdKey?: string
  /** Props to be passed to the YAxis component {accepts all Rechart `YAxis` Props} */
  yAxisProps?: React.ComponentPropsWithoutRef<typeof YAxis>
  /* Props to be passed for sparkline container height and width (number or percentage like '100%') */
  customDimension?: {
    height?: DimensionValue
    width?: DimensionValue
  }
  /** Optional prop to add a test id for QA testing */
  qaTestId?: string
}

const DEFAULT_BLUE = 'var(--dark-blue)'

const SparkLine = ({
  containerClassName,
  dataKey = 'data_point',
  graphData,
  strokeColor,
  thresholdColor,
  thresholdKey,
  lineProps,
  lineChartProps,
  yAxisProps,
  customDimension,
  qaTestId = 'sparkline',
}: SparkLineType): React.JSX.Element => {
  const isMobileView = useIsMobileView()
  const graphLineColor = strokeColor
    ? `var(--dark-${strokeColor})`
    : DEFAULT_BLUE
  const thresholdLineColor = thresholdColor
    ? `var(--dark-${thresholdColor})`
    : DEFAULT_BLUE

  const DEFAULT_CONTAINER_WIDTH = isMobileView ? 80 : 150
  const DEFAULT_CONTAINER_HEIGHT = 25

  return (
    <div qa-test-id={qaTestId}>
      <ResponsiveContainer
        width={
          (customDimension?.width ?? DEFAULT_CONTAINER_WIDTH) as
            | number
            | `${number}%`
        }
        height={
          (customDimension?.height ?? DEFAULT_CONTAINER_HEIGHT) as
            | number
            | `${number}%`
        }
        className={containerClassName}
      >
        <LineChart
          accessibilityLayer={false}
          width={isMobileView ? 150 : 300}
          height={100}
          data={graphData}
          {...lineChartProps}
        >
          <YAxis domain={['auto', 'auto']} hide {...yAxisProps} />

          {/* DATA LINE */}
          <Line
            dataKey={dataKey}
            stroke={graphLineColor}
            strokeWidth={1}
            dot={
              graphData.length === 1
                ? {
                    fill: graphLineColor,
                    strokeWidth: 1,
                    r: 2,
                  }
                : false
            }
            {...lineProps}
          />

          {/* THRESHOLD (MIDDLE DASHED LINE) */}
          <Line
            dataKey={thresholdKey}
            stroke={thresholdLineColor}
            dot={false}
            strokeDasharray='5,5'
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}

export default SparkLine