import { citywages } from '@charts-poc/demo-data/citywages'
import { defineChart, dot, lineY, text } from '@tanstack/charts'
import { scaleBand, scaleLinear } from 'd3-scale'
import { toSlopePoints } from './transform'
import { tanstackMount } from '../../shared/mount'
import type { ConformanceInput } from '../../types'

const colors = [
  '#2563eb',
  '#f97316',
  '#10b981',
  '#8b5cf6',
  '#ec4899',
  '#06b6d4',
  '#ca8a04',
  '#64748b',
]

const definition = (input: ConformanceInput) => {
  const rows = toSlopePoints(
    citywages.slice(input.revision * 4, input.revision * 4 + 8),
  )
  const labels = rows.filter((row) => row.year === '2015')
  return defineChart({
    marks: [
      lineY(rows, {
        x: 'year',
        y: 'inequality',
        color: 'nyt_display',
      }),
      dot(rows, {
        x: 'year',
        y: 'inequality',
        color: 'nyt_display',
        r: 3,
      }),
      text(labels, {
        x: 'year',
        y: 'inequality',
        text: 'nyt_display',
        color: 'nyt_display',
        dx: 6,
        anchor: 'start',
      }),
    ],
    x: {
      scale: () => scaleBand<string>().paddingInner(0.2).paddingOuter(0.08),
    },
    y: {
      scale: scaleLinear,
      grid: true,
      axis: { label: '90th/10th percentile wage ratio' },
    },
    color: {
      range: colors,
    },
    margin: { right: 76 },
  })
}

export const mount = tanstackMount(
  definition,
  'Metropolitan wage inequality, 1980 to 2015',
)

import type { CitywagesRow } from '@charts-poc/demo-data/citywages'

export interface SlopePoint {
  id: string
  Metro: string
  nyt_display: string
  year: '1980' | '2015'
  inequality: number
}

export function toSlopePoints(
  rows: readonly CitywagesRow[],
): readonly SlopePoint[] {
  return rows.flatMap((row) => [
    {
      id: `${row.Metro}:1980`,
      Metro: row.Metro,
      nyt_display: row.nyt_display,
      year: '1980' as const,
      inequality: row.R90_10_1980,
    },
    {
      id: `${row.Metro}:2015`,
      Metro: row.Metro,
      nyt_display: row.nyt_display,
      year: '2015' as const,
      inequality: row.R90_10_2015,
    },
  ])
}