import { memo, useCallback } from 'react';
import classNames from 'classnames';

import type { ClickableProps } from '~/src/components/Clickable';
import type { Icon } from '~/src/components/Icon/toIcon';
import type { CSSProperties } from 'react';

import Clickable from '~/src/components/Clickable';
import LinkIcon from '~/src/components/Icon/LinkIcon';
import { toRgba } from '~/src/lib/utils/color';
import { usePageTheme } from '../../hooks/theme';
import { useEmitter } from '../../hooks/useEmitter';
import useOpenExternalService from '../../hooks/useOpenExternalService';

const IconLinkButton = memo<
  {
    Icon?: Icon;
    name?: string;
    link: string;
    size?: string | number;
    onClick?: (params: { event: MouseEvent; data: any }) => void;
    renderLink?: boolean;
    clickData?: any;
    testId?: string;
    style?: CSSProperties;
  } & ClickableProps
>(
  ({
    Icon = LinkIcon,
    name,
    link,
    onClick,
    clickData,
    renderLink = true,
    testId,
    size = '5.2rem',
    style,
    ...clickableProps
  }) => {
    const pageTheme = usePageTheme();
    const openExternalService = useOpenExternalService();
    const emitter = useEmitter();

    const onClickInternal = useCallback(
      ({ event }) => {
        event.preventDefault();

        if (onClick) {
          onClick({ event, data: clickData });
          return;
        }

        if (!name) return;

        // emit event so arbitrary parts of the app can respond (eg. fb pixel)
        emitter.emit('openExternalService', {
          name,
          url: link,
        });

        openExternalService(link);
      },
      [link]
    );

    if (!name) return null;

    return (
      <Clickable
        testId={classNames('iconButton', testId)}
        onClick={onClickInternal}
        href={renderLink ? link : undefined}
        margin="0 0.1em"
        title={name}
        style={{
          color: toRgba(pageTheme.customFontColor ?? pageTheme.textColor, 0.9),
          fontSize: size,
          ...style,
        }}
        {...clickableProps}
      >
        <Icon
          size="1em"
          className="Icon"
          coloring={Icon.dynamicColoring && 'light'}
        />
      </Clickable>
    );
  }
);

export default IconLinkButton;