/**
 * @deprecated Use `BarChart` from `@material-hu/components/design-system/Charts/BarChart`.
 * Internal wrapper — only consumed by `NumberRatingChart` in this folder.
 * Can be deleted once `NumberRatingChart` is deprecated.
 */
import randomColor from 'randomcolor';
import Stack from '@material-hu/mui/Stack';

import MaterialBarChart from '@material-hu/components/design-system/Charts/BarChart';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type BarChartData = {
  value: number;
  color?: string;
  label: string;
};

export type BarChartProps = {
  data: BarChartData[];
};

export const BarChart = ({ data }: BarChartProps) => {
  const { t } = useLokaliseTranslation('general');

  return (
    <Stack sx={{ height: 250 }}>
      <MaterialBarChart
        type="bar"
        data={{
          labels: data.map(item => item.label),
          datasets: [
            {
              data: data.map(item => item.value),
              backgroundColor: data.map(
                item => item.color || randomColor({ seed: item.label }),
              ),
            },
          ],
        }}
        options={{
          plugins: {
            legend: { display: false },
            tooltip: {
              callbacks: {
                label: context =>
                  `${t('total')}: ${context.dataset.data[context.dataIndex]}`,
              },
            },
          },
          scales: { x: { grid: { display: false } } },
        }}
      />
    </Stack>
  );
};

export default BarChart;