import React, { ReactElement } from 'react';
import { Button, ButtonProps } from '@wix/design-system';
import { Add } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { cairoPageCtaClicked } from '@wix/bex-core/bi';
import { usePageButtonBiParams } from '../usePageButtonBiParams';

interface PrimaryPageButtonBaseProps {
  onClick: React.MouseEventHandler<HTMLButtonElement>;

  /**
   * The button content, defaults to "Create New"
   * @external
   */
  text?: string;
}

export type PrimaryPageButtonProps = PrimaryPageButtonBaseProps &
  Omit<ButtonProps, 'children' | 'onClick' | 'size' | 'skin'>;

export type PrimaryPageButtonElement = ReactElement<
  PrimaryPageButtonProps,
  typeof PrimaryPageButton
>;

/**
 * @deprecated
 * Use `PrimaryActions` component instead.
 */
export function PrimaryPageButton({
  onClick,
  text,
  prefixIcon,
  ...rest
}: PrimaryPageButtonProps) {
  const { translate: t, reportBi } = useWixPatternsContainer();
  const content = text ?? t('cairo.page.primary.cta');
  const { pageType, location } = usePageButtonBiParams();

  return (
    <Button
      {...rest}
      prefixIcon={prefixIcon ?? <Add />}
      size="medium"
      skin="standard"
      as="button"
      onClick={(e) => {
        reportBi(
          cairoPageCtaClicked({
            ctaName: content,
            ctaType: 'Primary Page Button',
            location,
            componentType: 'Page',
            pageType,
            section: 'Vertical',
          }),
        );

        onClick(e);
      }}
    >
      {content}
    </Button>
  );
}