import { MouseEvent, useState } from 'react';

import { IconMoodHappy, IconProps } from '@material-hu/icons/tabler';
import IconButton, { IconButtonProps } from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { SxProps, useTheme } from '@material-hu/mui/styles';

import HuTooltip from '@material-hu/components/design-system/Tooltip';
import { TooltipProps as HuTooltipProps } from '@material-hu/components/design-system/Tooltip/types';

import useGeneralError from 'src/hooks/useGeneralError';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import { useTranslation as useChatTranslation } from 'src/components/dashboard/chat/i18n';

import ReactionPicker, { PickerProps } from './ReactionPicker';

export type ReactionAddProps = Pick<
  PickerProps,
  'anchorOrigin' | 'transformOrigin'
> & {
  onAdd: (emoji: string, unified: string) => any;
  onClose?: (event: MouseEvent) => void;
  onOpen?: (event: MouseEvent) => void;
  variant?: 'button' | 'icon';
  disabled?: boolean;
  iconColor?: string;
  bgColor?: string;
  buttonSize?: {
    width: string;
    height: string;
  };
  tooltipProps?: Omit<HuTooltipProps, 'children' | 'title'>;
  iconSize?: number;
  iconProps?: SxProps;
};

const ReactionAdd = ({
  onAdd,
  onClose = () => null,
  onOpen = () => null,
  variant = 'button',
  disabled = false,
  iconColor,
  bgColor,
  anchorOrigin,
  transformOrigin,
  buttonSize,
  iconSize = 20,
  tooltipProps,
  iconProps,
}: ReactionAddProps) => {
  const { palette } = useTheme();
  const { t } = useTranslation('web_only');
  const { t: t2 } = useChatTranslation();
  const HugoThemeProvider = useHuGoTheme();
  const showGeneralError = useGeneralError();
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const containerElement = tooltipProps?.slotProps?.popper?.container;

  const effectiveIconColor = iconColor ?? palette.new.text.neutral.default;

  const openPicker = (event: MouseEvent) => {
    event.stopPropagation();
    onOpen(event);
    setAnchorEl(event.currentTarget as HTMLElement);
  };

  const closePicker = (event: MouseEvent) => {
    event.stopPropagation();
    onClose(event);
    setAnchorEl(null);
  };

  const handleClick = (event: MouseEvent) => {
    anchorEl ? closePicker(event) : openPicker(event);
  };

  const handleAdd = async (
    emoji: string,
    unified: string,
    event: MouseEvent,
  ) => {
    try {
      closePicker(event);
      await onAdd(emoji, unified);
    } catch (err) {
      showGeneralError(err, t('reactions.add_reaction_error'));
    }
  };

  const buttonBgColor = bgColor ?? palette.new.background.elements.grey;

  const commonIconButtonProps: IconButtonProps = {
    onClick: handleClick,
    disabled,
    'aria-label': t('reactions.add_reaction'),
  };

  const iconStyles: IconProps = {
    width: iconSize,
    height: iconSize,
    color: effectiveIconColor,
  };

  const buttonByVariant = {
    button: (
      <IconButton
        {...commonIconButtonProps}
        sx={{
          backgroundColor: buttonBgColor,
          width: buttonSize?.width,
          height: buttonSize?.height,
        }}
      >
        <IconMoodHappy {...iconStyles} />
      </IconButton>
    ),
    icon: (
      <IconButton
        {...commonIconButtonProps}
        sx={{ p: 0, '&:hover': { backgroundColor: 'transparent' } }}
      >
        <IconMoodHappy {...iconStyles} />
      </IconButton>
    ),
  };
  return (
    <HugoThemeProvider>
      <ReactionPicker
        anchorEl={anchorEl}
        onClose={closePicker}
        onSelect={handleAdd}
        anchorOrigin={anchorOrigin}
        transformOrigin={transformOrigin}
        container={containerElement}
      />
      <HuTooltip
        direction={tooltipProps?.direction ?? 'bottom'}
        title={disabled ? t2('CANNOT_ADD_EMOJI') : t2('PICK_EMOJI')}
        {...tooltipProps}
      >
        <Stack sx={{ width: 'fit-content', ...iconProps }}>
          {buttonByVariant[variant]}
        </Stack>
      </HuTooltip>
    </HugoThemeProvider>
  );
};
export default ReactionAdd;