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';

type AttendanceChartProps = {
  stats: SessionAttendanceStats;
};

const AttendanceChart = ({ stats }: AttendanceChartProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  return (
    <StatCard title={t('session.attendance.title')}>
      <Stack
        sx={{
          maxHeight: '100px',
          width: '100%',
          alignSelf: 'center',
          my: 'auto',
        }}
      >
        <BarChart
          type="bar"
          data={{
            labels: [
              t('common.present_other'),
              t('common.absent_other'),
              t('common.with_no_configuration'),
            ],
            datasets: [
              {
                data: [
                  stats.assisted,
                  stats.notAssisted,
                  stats.pendingAssistance,
                ],
                backgroundColor: [
                  palette.border?.primaryBorder,
                  palette.ilustrations?.primaryIlus,
                  palette.buttons?.buttonPrimaryHover,
                ],
                borderRadius: 4,
                minBarLength: 5,
              },
            ],
          }}
          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 AttendanceChart;
