import { Button, ButtonProps } from '@wix/design-system';
import React from 'react';
import { PickerModalState } from '../../hooks';
import { FiltersMap } from '@wix/bex-core';
import { TextWidthLoader } from '../TextWidthLoader';

export type PickerModalOpenButtonProps<
  T,
  F extends FiltersMap,
> = ButtonProps & {
  state: PickerModalState<T, F>;
};

export function PickerModalOpenButton<T, F extends FiltersMap>(
  props: PickerModalOpenButtonProps<T, F>,
) {
  const { state, onMouseEnter, onClick, children, ...rest } = props;

  const { openModalOrCTA, hover, showButtonLoadingIndication } = state;

  return (
    <Button
      {...rest}
      onMouseEnter={(...args: any[]) => {
        hover();
        onMouseEnter?.(...args);
      }}
      onClick={(event: any) => {
        openModalOrCTA();
        onClick?.(event);
      }}
    >
      {showButtonLoadingIndication ? (
        <TextWidthLoader size="tiny" text={children} />
      ) : (
        children
      )}
    </Button>
  );
}