/**
 * @deprecated Thin wrapper over Hugo `LineChart` — replace consumers directly with
 * `LineChart` from `@material-hu/components/design-system/Charts/LineChart`.
 */
import { useMemo } from 'react';

import Stack from '@material-hu/mui/Stack';

import LineChart from '@material-hu/components/design-system/Charts/LineChart';

import useFormatDate from 'src/hooks/useFormatDate';
import { formatTextDate, getUTCO } from 'src/utils/timeUtils';

export type DateLineChartData = {
  value: number;
  date: string;
};

export type DateLineChartProps = {
  data: DateLineChartData[];
  name: string;
};

export const DateLineChart = ({ data, name }: DateLineChartProps) => {
  const { formatDate } = useFormatDate();

  const chartData = useMemo(() => {
    const labels = data.map(item => formatDate(item.date, 'yyyy-MM-dd'));
    const datasets = data.map(item => ({
      x: new Date(item.date).getDate(),
      y: item.value,
    }));

    return {
      labels,
      datasets: [{ data: datasets }],
    };
  }, [data, formatDate]);

  return (
    <Stack sx={{ width: '100%', height: 300 }}>
      <LineChart
        type="line"
        data={chartData}
        options={{
          maintainAspectRatio: false,
          plugins: {
            legend: { display: false },
            tooltip: {
              callbacks: {
                title: ctx => {
                  const item = ctx[0];
                  const formattedDate = formatTextDate(
                    getUTCO(data[item.dataIndex].date),
                  );
                  return formattedDate ?? '';
                },
                label: ctx => `${name}: ${ctx.parsed.y}`,
              },
            },
          },
          scales: {
            x: { grid: { display: false } },
            y: { grid: { display: false } },
          },
        }}
      />
    </Stack>
  );
};

export default DateLineChart;