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

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

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

import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { newPathFields } from 'src/pages/dashboard/Learning/Paths/New/form';
import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

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

  const [sendPushNotification, sendEmailNotification] = useWatch({
    control,
    name: [
      newPathFields.configuration.sendPushNotification(),
      newPathFields.configuration.sendEmailNotification(),
    ],
  });

  return (
    <LearningCard id="paths-configuration-notifications">
      <Title
        variant="S"
        title={t('general:notifications')}
        description={t(
          'notifications_center:notification_channels.audience_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(newPathFields.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(newPathFields.configuration.sendEmailNotification(), checked)
        }
        slotProps={{
          root: { color: 'grey' },
          avatar: {
            sx: {
              bgcolor: theme => theme.palette.new.background.elements.brand,
            },
          },
        }}
      />
    </LearningCard>
  );
};

export default ConfigurationNotifications;