import * as React from 'react';
import { createComponent, createElement, createHook } from 'bumbag/utils';

import { Box, BoxProps } from '../Box';
import { ButtonContext, ButtonProps } from '../Button';
import { TextProps } from '../Text';
import * as styles from './Button.styles';

export type LocalButtonTextProps = {
  color?: ButtonProps['color'];
  palette?: ButtonProps['palette'];
  size?: ButtonProps['size'];
  variant?: ButtonProps['variant'];
};
export type ButtonTextProps = BoxProps & TextProps & LocalButtonTextProps;

const useProps = createHook<ButtonTextProps>(
  (props) => {
    const buttonProps = React.useContext(ButtonContext);
    const boxProps = Box.useProps(props);
    return { ...buttonProps, ...boxProps };
  },
  { themeKey: 'native.ButtonText' }
);

export const ButtonText = createComponent<ButtonTextProps>(
  (props) => {
    const htmlProps = useProps(props);
    return createElement({
      children: props.children,
      component: styles.StyledButtonText,
      htmlProps,
    });
  },
  {
    attach: {
      useProps,
      displayName: 'native.ButtonText',
    },
    themeKey: 'native.ButtonText',
  }
);