import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuFormRadioButtonGroup from '@material-hu/components/composed-components/RadioButtonGroup/form';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import { GroupMailNotificationSettings } from '../constants';

import {
  GROUP_NOTIFICATIONS_SETTINGS_MAIL_FORM_NAME,
  NOTIFICATION_CENTER_SETTINGS_MAIL_FORM_NAME,
  PUSH_NOTIFICATIONS_SETTINGS_FORM_NAME,
} from './useGroupNotificationsSettingsDrawer';

const GroupNotificationsSettings = () => {
  const { t } = useTranslation(['group']);

  const emailSettingsOptions = [
    {
      value: GroupMailNotificationSettings.ON,
      label: t('group:notifications_mail_title_on', {
        context: GroupMailNotificationSettings.ON,
      }),
      helperText: t('group:notifications_mail_description_on', {
        context: GroupMailNotificationSettings.ON,
      }),
    },
    {
      value: GroupMailNotificationSettings.OFF,
      label: t('group:notifications_mail_title_off', {
        context: GroupMailNotificationSettings.OFF,
      }),
      helperText: t('group:notifications_mail_description_off', {
        context: GroupMailNotificationSettings.OFF,
      }),
    },
  ];
  const notificationsCenterOptions = [
    {
      value: GroupMailNotificationSettings.ON,
      label: t('group:notifications_mail_title_on', {
        context: GroupMailNotificationSettings.ON,
      }),
      helperText: t('group:notifications_center_description_on', {
        context: GroupMailNotificationSettings.ON,
      }),
    },
    {
      value: GroupMailNotificationSettings.OFF,
      label: t('group:notifications_mail_title_off', {
        context: GroupMailNotificationSettings.OFF,
      }),
      helperText: t('group:notifications_center_description_off', {
        context: GroupMailNotificationSettings.OFF,
      }),
    },
  ];

  const pushNotificationsOptions = [
    {
      value: GroupMailNotificationSettings.ON,
      label: t('group:notifications_push_title_on'),
      helperText: t('group:notifications_push_description_on'),
    },
    {
      value: GroupMailNotificationSettings.OFF,
      label: t('group:notifications_push_title_off'),
      helperText: t('group:notifications_push_description_off'),
    },
  ];

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {t('group:notifications_mail_general_title')}
      </Typography>
      <HuFormRadioButtonGroup
        name={GROUP_NOTIFICATIONS_SETTINGS_MAIL_FORM_NAME}
        options={emailSettingsOptions}
        sx={{ gap: 2 }}
      />
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {t('group:notifications_center_general_title')}
      </Typography>
      <HuFormRadioButtonGroup
        name={NOTIFICATION_CENTER_SETTINGS_MAIL_FORM_NAME}
        options={notificationsCenterOptions}
        sx={{ gap: 2 }}
      />
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {t('group:notifications_push_general_title')}
      </Typography>
      <HuFormRadioButtonGroup
        name={PUSH_NOTIFICATIONS_SETTINGS_FORM_NAME}
        options={pushNotificationsOptions}
        sx={{ gap: 2 }}
      />
    </Stack>
  );
};

export default GroupNotificationsSettings;
