import { Line } from 'react-chartjs-2';
import 'chart.js/auto';
import { useLanguage } from './LanguageContext';
import { translations } from '../constants/translations';
import type { FlightPoint } from '../types';

interface AltitudeChartProps {
  points: FlightPoint[];
}

export default function AltitudeChart({ points }: AltitudeChartProps) {
  const { targetLanguage } = useLanguage();
  const t = translations[targetLanguage];

  const getFontSize = () => {
    const screenWidth = window.innerWidth;
    return screenWidth > 1180 ? 12 : 8;
  };

  const data = {
    labels: points.map((_, index) => index + 1),
    datasets: [{
      label: t.label,
      data: points.map(point => point.altitude),
      borderColor: 'rgb(0, 0, 225)',
      backgroundColor: 'rgba(0, 0, 225, 0.2)',
      pointBackgroundColor: 'rgb(255, 195, 0)',
      pointBorderColor: 'rgb(0, 0, 0)',
      pointBorderWidth: 1,
      tension: 0.1,
    }],
  };

  const options = {
    plugins: {
      legend: {
        labels: {
          font: { size: getFontSize() },
        },
      },
    },
    scales: {
      x: {
        ticks: { font: { size: getFontSize() } },
      },
      y: {
        ticks: { font: { size: getFontSize() } },
      },
    },
  };

  return <Line data={data} options={options} />;
}
