import React, { forwardRef } from 'react';
import { Button, ButtonProps } from '@wix/design-system';
import { Add } from '@wix/wix-ui-icons-common/lazy';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { useSelector } from '../../useSelector';
import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';

export interface PrimaryActionButtonProps
  extends Omit<ButtonProps, 'size' | 'fullWidth' | 'dataHook' | 'skin' | 'as'> {
  /**
   * Callback that is called each time the button is clicked.
   * @external
   */
  onClick?: any;
}

export const PrimaryActionButton = forwardRef<Button, PrimaryActionButtonProps>(
  (props, ref) => {
    const { translate: t, initTask } = useWixPatternsContainer();
    const { toolbarBIReporter } = useToolbarCollectionContext();
    const isBmHarmonyTheme = useBmHarmonyTheme();
    const { priority = isBmHarmonyTheme ? 'secondary' : 'primary' } = props;

    useSelector(() => initTask.status);

    return (
      <Button
        ref={ref}
        prefixIcon={<Add />}
        {...props}
        as="button"
        size="small"
        priority={priority}
        skin="standard"
        dataHook="toolbar-primary-action-button"
        onClick={(event) => {
          toolbarBIReporter.onPrimaryActionButtonClick();
          props.onClick?.(event);
        }}
      >
        {props.children ??
          t('cairo.collectionsPage.add.item.CTA', { defaultValue: '' })}
      </Button>
    );
  },
);

PrimaryActionButton.displayName = 'PrimaryActionButton';