import React from "react";
import * as d3Shape from "d3-shape";
import { scaleTime, scaleLinear } from "d3-scale";
import { Interval } from "date-fns";
interface DateData {
  data: number | null;
  date: string;
}

export const TrackStreamsGraph: React.FC<{
  interval: Interval;
  data: DateData[][];
  width: number;
  height: number;
}> = ({ data, interval, width, height }) => {
  const leftMargin = 50;
  const bottomMargin = 20;
  const contentWidth = width - leftMargin;
  const contentHeight = height - bottomMargin;

  const line = data[0];
  const minValue = Math.min(...line.map((d) => d.data ?? 0), 0);
  const maxValue = Math.max(...line.map((d) => d.data ?? 0));

  const scaleX = scaleTime()
    .domain([interval.start, interval.end])
    .range([0, contentWidth]);

  const scaleY = scaleLinear()
    .domain([minValue, maxValue])
    .range([contentHeight, 0]);

  const getLine = d3Shape
    .line<DateData>()
    .x((d) => scaleX(new Date(d.date)))
    .y((d) => scaleY(d.data ?? 0))
    .defined((d) => d.data != null)
    .curve(d3Shape.curveLinear);

  //const padding = 16;
  const tickSize = 2;

  return (
    <svg className="line-graph" viewBox={`0 0 ${width} ${height}`}>
      <g transform={`translate(${leftMargin}, 0)`}>
        {data.map((line) => (
          <path
            d={getLine(line) ?? ""}
            stroke={"white"}
            fill="transparent"
            strokeWidth={0.5}
          />
        ))}
        <g
          transform={`translate(0, ${
            contentHeight + bottomMargin - tickSize - 4
          })`}
        >
          {scaleX.ticks(40).map((date, i) => (
            <g transform={`translate(${scaleX(date)}, 0)`}>
              <line
                y1={-tickSize}
                y2={-2 * tickSize}
                stroke="white"
                strokeWidth={0.5}
              />
              {i % 2 === 1 && (
                <text
                  style={{
                    fontSize: "8px",
                    color: "white",
                    textAnchor: "middle",
                    transform: `translateY(${tickSize + 4}px)`,
                  }}
                  fill="white"
                >
                  {Intl.DateTimeFormat(undefined, {
                    month: "numeric",
                    day: "numeric",
                  }).format(date)}
                </text>
              )}
            </g>
          ))}
        </g>
      </g>

      <g transform={`translate(${contentWidth - tickSize - 4}, 0})`}>
        {scaleY.ticks(3).map((value) => (
          <g transform={`translate(${leftMargin}, ${scaleY(value)})`}>
            <line x2={tickSize} stroke="white" strokeWidth={0.5} />
            <text
              style={{
                fontSize: "10px",
                color: "white",
                textAnchor: "end",
                transform: `translateX(-${tickSize + 4}px)`,
              }}
              fill="white"
            >
              {Intl.NumberFormat("en", { notation: "compact" }).format(value)}
            </text>
          </g>
        ))}
      </g>
    </svg>
  );
};