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

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

import StatCard from 'src/pages/dashboard/Learning/Sessions/List/components/StatCard';
import { type SessionAttendanceStats } from 'src/pages/dashboard/Learning/Sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type ConfirmationAttendanceChartProps = {
  stats: SessionAttendanceStats;
};

const ConfirmationAttendanceChart = ({
  stats,
}: ConfirmationAttendanceChartProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');

  return (
    <StatCard title={t('session.attendance.attendance_confirmation')}>
      <Stack
        sx={{
          width: '100%',
          maxHeight: '100px',
          alignSelf: 'center',
          my: 'auto',
        }}
      >
        <BarChart
          type="bar"
          data={{
            labels: [t('common.confirmed'), t('common.pending_answer')],
            datasets: [
              {
                data: [stats.confirmed, stats.notConfirmed],
                backgroundColor: [
                  palette.border?.primaryBorder,
                  palette.ilustrations?.primaryIlus,
                ],
                minBarLength: 5,
                borderRadius: 4,
              },
            ],
          }}
          options={{
            maintainAspectRatio: false,
            indexAxis: 'y',
            plugins: { legend: { display: false } },
            scales: {
              x: {
                ticks: {
                  stepSize:
                    Math.max(stats.confirmed, stats.notConfirmed) <= 10
                      ? 1
                      : undefined,
                },
              },
            },
          }}
        />
      </Stack>
    </StatCard>
  );
};

export default ConfirmationAttendanceChart;