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 ParticipationAttendanceChartProps = {
  stats: SessionAttendanceStats;
};

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

  return (
    <StatCard
      sx={{ width: 'fit-content', minWidth: '300px' }}
      title={t('common.participation')}
    >
      <Stack
        sx={{
          maxWidth: '242px',
          height: '120px',
          alignSelf: 'center',
          my: 'auto',
        }}
      >
        <BarChart
          type="bar"
          data={{
            labels: [t('common.present_other'), t('common.confirmed')],
            datasets: [
              {
                data: [stats.assisted, stats.confirmed],
                backgroundColor: [
                  palette.buttons?.buttonPrimaryHover,
                  palette.border?.primaryBorder,
                ],
                borderRadius: 4,
                minBarLength: 5,
              },
            ],
          }}
          options={{
            maintainAspectRatio: false,
            scales: {
              y: {
                suggestedMax: stats.totalAssigned,
                max: stats.totalAssigned,
                ticks: { precision: 0 },
                grace: '0%',
              },
            },
            elements: {
              bar: {
                backgroundColor: palette.buttons?.buttonPrimaryHover,
                borderColor: palette.ilustrations?.neutralIlus,
                borderWidth: 0,
              },
            },
            plugins: {
              legend: { display: false },
            },
          }}
        />
      </Stack>
    </StatCard>
  );
};

export default ParticipationAttendanceChart;
