import React from 'react';
import type { Goal, Observation } from 'fhir/r4';
import { buildGoalChart, CHART_HEIGHT, CHART_WIDTH } from '../../../../utils/goalChart';
import './GoalChart.css';

interface Props {
    goal: Goal;
    observations: Observation[];
}

/** The goal's readings as a line, the target dashed across it. Renders nothing below two readings. */
export const GoalChart: React.FC<Props> = ({ goal, observations }) => {
    const chart = buildGoalChart(goal, observations);
    if (!chart) return null;

    const latest = chart.points[chart.points.length - 1];

    return (
        <div className="ak-goal-chart">
            <svg viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`} role="img" aria-label={chart.summary}>
                <line className="ak-goal-chart__axis" x1={chart.left} y1={chart.axisY} x2={chart.right} y2={chart.axisY} />
                {chart.target && (
                    <>
                        <line className="ak-goal-chart__target" x1={chart.left} y1={chart.target.y} x2={chart.right} y2={chart.target.y} />
                        <text className="ak-goal-chart__target-label" x={chart.left + 2} y={chart.target.labelY}>
                            {chart.target.label}
                        </text>
                    </>
                )}
                {chart.ticks.map((tick) => (
                    <text key={tick.label} x={0} y={tick.y}>{tick.label}</text>
                ))}
                <polyline
                    className="ak-goal-chart__series"
                    points={chart.points.map((point) => `${point.x},${point.y}`).join(' ')}
                />
                <g className="ak-goal-chart__dots">
                    {chart.points.map((point, index) => (
                        <circle key={index} cx={point.x} cy={point.y} r={2.6}>
                            <title>{point.label}</title>
                        </circle>
                    ))}
                </g>
                <circle className="ak-goal-chart__now" cx={latest.x} cy={latest.y} r={3.4}>
                    <title>{latest.label}</title>
                </circle>
                {chart.months.map((month) => (
                    <text key={`${month.label}-${month.x}`} x={month.x} y={CHART_HEIGHT - 4}>{month.label}</text>
                ))}
            </svg>
        </div>
    );
};

export default GoalChart;