import { IconCategory2, IconCertificate } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import { FeatureFlags } from 'src/types/featureFlags';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { settingsRoutes } from '../../routes';

import SettingOptionCard, {
  type SettingOptionCardProps,
} from './SettingOptionCard';

type SettingOption = SettingOptionCardProps & {
  id: string;
};

const SettingOptionList = () => {
  const { t } = useLokaliseTranslation(['learning', 'apps']);
  const isCertificatesEnabled = useFeatureFlag(
    FeatureFlags.MANAGE_LEARNING_CERTIFICATES,
  );

  const options: SettingOption[] = [
    {
      id: 'categories',
      Icon: IconCategory2,
      title: t('settings.categories.title'),
      description: t('settings.categories.description'),
      to: settingsRoutes.categories.base(),
    },
    ...insertIf(isCertificatesEnabled, {
      id: 'certificates',
      Icon: IconCertificate,
      title: t('settings.certificates.title'),
      description: t('settings.certificates.description'),
      to: settingsRoutes.certificates.base(),
    }),
  ];

  return (
    <Stack
      sx={{
        display: 'grid',
        gridTemplateColumns:
          'repeat(auto-fill, minmax(min(100%, 378px), 378px))',
        gap: 2,
        justifyContent: 'start',
      }}
    >
      {options.map(({ id, ...option }) => (
        <SettingOptionCard
          key={id}
          {...option}
        />
      ))}
    </Stack>
  );
};

export default SettingOptionList;
