import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import { ButtonStyleVariant } from '../styles/defaults/themes.interface';
import React from 'react';
import { mergeStyles } from '../styles/mergeStyles';
import { merge } from '../utils/obj/merge';
import { Select } from '..';
import { SelectProps, SelectStyles } from './Select';

export interface ButtonSelectStyle extends SelectStyles {
  wrapper?: CSSProperties;
}

export interface ButtonSelectOption {
  label: string;
  value: string;
}

export interface ButtonSelectProps extends SelectProps {
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
  variant?: keyof ButtonStyleVariant;
}
export const ButtonSelect: React.FC<ButtonSelectProps> = observer((props) => {
  const { id, variant = 'select', styleOverwrites, onClick } = props;
  const { theme } = useApphouse();
  const { styles } = theme;
  const componentStyles: ButtonSelectStyle = {
    container: {
      color: 'inherit'
    },
    select: merge({}, styles.button[variant], { color: 'inherit' }),
    option: {
      color: 'inherit'
    }
  };
  const localStyles = mergeStyles(componentStyles, styleOverwrites);

  return (
    <div
      {...css(localStyles.container, { position: 'relative' })}
      onClick={(e) => {
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        onClick && onClick(e);
      }}
      data-id={`ButtonSelect-${id}`}
      data-xray="ButtonSelect"
      data-style="wrapper"
    >
      <Select {...props} />
    </div>
  );
});