import { type FunctionComponent, type SVGProps } from 'react';

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

import SelectionCard from '@material-hu/components/composed-components/SelectionCard';
import Title from '@material-hu/components/design-system/Title';

import {
  TEMPLATE_THUMB_HEIGHT_PX,
  TEMPLATE_THUMB_WIDTH_PX,
} from 'src/pages/dashboard/Learning/Settings/Certificates/Create/constants';
import { type CertificateTemplateSlug } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CertificateTemplateOptionCardProps = {
  slug: CertificateTemplateSlug;
  Image: FunctionComponent<SVGProps<SVGSVGElement>>;
  checked: boolean;
  onClick: () => void;
};

const CertificateTemplateOptionCard = ({
  slug,
  Image,
  checked,
  onClick,
}: CertificateTemplateOptionCardProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const title = t(`settings.certificates.create_flow.${slug}_template`);

  return (
    <SelectionCard
      fullWidth
      checked={checked}
      onClick={onClick}
      sx={{ flex: 1 }}
    >
      <Stack sx={{ px: 3 }}>
        <Title
          variant="M"
          title={title}
          description={t(
            `settings.certificates.create_flow.${slug}_template_description`,
          )}
          centered
          sx={{ width: '100%' }}
        />
        <Box
          sx={{
            mt: 2,
            display: 'flex',
            justifyContent: 'center',
            ...(checked
              ? { '--cert-svg-bg': palette.new.background.elements.default }
              : {}),
            '& > svg': {
              border: '1px solid',
              borderColor: 'divider',
              borderRadius: 1,
              width: '100%',
              maxWidth: TEMPLATE_THUMB_WIDTH_PX,
              height: TEMPLATE_THUMB_HEIGHT_PX,
              flexShrink: 0,
            },
          }}
        >
          <Image aria-hidden />
        </Box>
      </Stack>
    </SelectionCard>
  );
};

export default CertificateTemplateOptionCard;
