import {
  IconListSearch,
  IconMessage2Question,
} from '@material-hu/icons/tabler';

import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuMenu from '@material-hu/components/design-system/Menu';
import { logEvent } from 'src/config/amplitude';
import { useZendesk } from 'src/config/zendesk';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents } from 'src/utils/logging';

type SupportMenuProps = {
  anchorEl: HTMLElement | null;
  onClose: () => void;
  helpCenterUrl: string;
};

const SupportMenu = ({
  anchorEl,
  onClose,
  helpCenterUrl,
}: SupportMenuProps) => {
  const { isWidgetOpen, onHide, onShow, setShowSupportButton } = useZendesk();
  const { t } = useLokaliseTranslation('general');

  const handleOpenSupport = () => {
    if (isWidgetOpen) {
      onHide();
    } else {
      logEvent(LogEvents.SUPPORT_WIDGET_OPENED, {
        source: 'SUPPORT_MENU',
      });
      onShow();
      setShowSupportButton(true);
    }
  };

  const handleOpenHelpCenter = () => {
    logEvent(LogEvents.SUPPORT_HELP_CENTER_OPENED);
    window.open(helpCenterUrl, '_blank', 'noopener,noreferrer');
  };

  const options = [
    {
      key: 'support-1',
      label: t('help_center'),
      onClick: handleOpenHelpCenter,
      Icon: IconListSearch,
    },
    {
      key: 'support-2',
      label: t('talk_to_us'),
      onClick: handleOpenSupport,
      Icon: IconMessage2Question,
    },
  ];
  return (
    <HuMenu
      open={!!anchorEl}
      anchorEl={anchorEl}
      onClose={onClose}
    >
      <HuList>
        {options.map(option => (
          <HuListItem
            key={option.key}
            onClick={option.onClick}
            avatar={{
              Icon: option.Icon,
            }}
            text={{
              title: option.label,
            }}
          />
        ))}
      </HuList>
    </HuMenu>
  );
};

export default SupportMenu;