import { Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
import { WidgetEvent } from '../../types/events.js';
import mixpanel from 'mixpanel-browser';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';

interface ContactSupportButtonProps {
  supportId?: string;
}

export const ContactSupportButton = ({
  supportId,
}: ContactSupportButtonProps) => {
  const { t } = useTranslation();
  const widgetEvents = useWidgetEvents();
  const { mixpanelToken, contactSupportUrl } = useWidgetConfig();

  const handleClick = () => {
    if (mixpanelToken) {
      mixpanel.track('universal_swap_select_contact_support', {
        supportId,
      });
    }
    if (!widgetEvents.all.has(WidgetEvent.ContactSupport)) {
      const url = contactSupportUrl || 'https://discord.com/invite/u5b9dTrSTr'; // default is nimbus discord
      const target = '_blank';
      const rel = 'nofollow noreferrer';
      window.open(url, target, rel);
    } else {
      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId });
    }
  };

  return (
    <Button onClick={handleClick} fullWidth>
      {t('button.contactSupport')}
    </Button>
  );
};