import { useFormContext, useWatch } from 'react-hook-form';
import { useMatch } from 'react-router-dom';

import { IconDeviceMobile, IconMail } from '@tabler/icons-react';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { coursesRoutes } from 'src/pages/dashboard/Learning/Courses/routes';
import { type StepsTypes } from 'src/pages/dashboard/Learning/Courses/types';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type ConfigurationNotificationsProps = {
  disabled?: boolean;
};

export const ConfigurationNotifications = ({
  disabled = false,
}: ConfigurationNotificationsProps) => {
  const { t } = useLokaliseTranslation(['learning', 'notifications_center']);
  const { control, setValue } = useFormContext<StepsTypes>();
  const HugoThemeProvider = useHuGoTheme();

  const isEdit = !!useMatch(coursesRoutes.editCourse());

  const [sendPushNotification, sendEmailNotification] = useWatch({
    control,
    name: [
      newCourseFields.configuration.sendPushNotification(),
      newCourseFields.configuration.sendEmailNotification(),
    ],
  });
  const withNotification = !!sendPushNotification || !!sendEmailNotification;

  return (
    <HugoThemeProvider>
      <LearningCard id="course-configuration-notifications">
        <Title
          variant="S"
          title={t('general:notifications')}
          description={t(
            'notifications_center:notification_channels.audience_description',
          )}
        />
        {isEdit && withNotification && (
          <Alert
            severity="highlight"
            title={t('common.notify_info_title')}
            description={t('common.notify_info_description')}
          />
        )}
        <AvatarSwitcherCard
          icon={IconDeviceMobile}
          title={t(
            'notifications_center:notification_channels.push_notifications',
          )}
          description={t(
            'notifications_center:notification_channels.audience_push_description',
          )}
          checked={!!sendPushNotification}
          disabled={disabled}
          onChange={checked =>
            setValue(
              newCourseFields.configuration.sendPushNotification(),
              checked,
            )
          }
          slotProps={{
            root: { color: 'grey' },
            avatar: {
              sx: {
                bgcolor: theme => theme.palette.new.background.elements.brand,
              },
            },
          }}
        />
        <AvatarSwitcherCard
          icon={IconMail}
          title={t(
            'notifications_center:notification_channels.email_notifications',
          )}
          description={t(
            'notifications_center:notification_channels.audience_email_description',
          )}
          checked={!!sendEmailNotification}
          disabled={disabled}
          onChange={checked =>
            setValue(
              newCourseFields.configuration.sendEmailNotification(),
              checked,
            )
          }
          slotProps={{
            root: { color: 'grey' },
            avatar: {
              sx: {
                bgcolor: theme => theme.palette.new.background.elements.brand,
              },
            },
          }}
        />
      </LearningCard>
    </HugoThemeProvider>
  );
};

export default ConfigurationNotifications;