import { type MouseEvent } from 'react';

import {
  type IconButtonProps,
  IconButton as MuiIconButton,
  Stack,
} from '@mui/material';
import { omit } from 'lodash';

import { type ListItemActionProps } from './types';

const getActions = (
  action: ListItemActionProps | undefined,
  action2: ListItemActionProps | undefined,
) => {
  if (!action && !action2) return null;

  const IconAction1 = action?.Icon;
  const IconAction2 = action2?.Icon;

  const handleClick =
    (callback?: (event: MouseEvent<HTMLButtonElement>) => void) =>
    (event: MouseEvent<HTMLButtonElement>) => {
      event.stopPropagation();
      callback && callback(event);
    };

  const commonProps: IconButtonProps = {
    size: 'medium',
    sx: { svg: { width: 'inherit', height: 'inherit' } },
  };

  return (
    <Stack
      sx={{
        gap: 0.5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
      }}
    >
      {action && (
        <MuiIconButton
          {...commonProps}
          {...omit(action, 'Icon')}
          onClick={handleClick(action.onClick)}
        >
          {IconAction1 && <IconAction1 size={24} />}
        </MuiIconButton>
      )}
      {action2 && (
        <MuiIconButton
          {...commonProps}
          {...omit(action2, 'Icon')}
          onClick={handleClick(action2.onClick)}
        >
          {IconAction2 && <IconAction2 size={24} />}
        </MuiIconButton>
      )}
    </Stack>
  );
};

export default getActions;
