import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import { Hint } from './common/hint/Hint';
import { ThemeColors } from '../styles/defaults/themes.interface';
import React from 'react';
import { mergeStyles } from '../styles/mergeStyles';

export interface TagStyles {
  container?: CSSProperties;
}
export interface TagProps {
  backgroundColor?: keyof ThemeColors;
  foregroundColor?: keyof ThemeColors;
  children: React.ReactNode;
  label?: string;
  styleOverwrites?: TagStyles;
}
export const Tag: React.FC<TagProps> = observer(
  ({ children, backgroundColor, foregroundColor, label, styleOverwrites }) => {
    const store = useApphouse();
    const { colors } = store.theme;
    const bgColor = backgroundColor
      ? colors[backgroundColor]
      : colors.brand || colors.brand;
    const fgColor = foregroundColor
      ? colors[foregroundColor]
      : colors.onBrand || colors.onBrand;
    const defaultStyles = {
      container: {
        backgroundColor: bgColor,
        fontFamily: store.theme.tokens.fontFamily.text,
        color: fgColor,
        fontSize: '11px',
        paddingBottom: '4px',
        paddingLeft: '6px',
        paddingRight: '6px',
        paddingTop: '4px',
        fontWeight: 'bold',
        borderRadius: '4px',
        cursor: 'default'
      }
    };
    const localStyles = mergeStyles<TagStyles>(defaultStyles, styleOverwrites);
    if (!label) {
      return <span {...css(localStyles.container)}>{children}</span>;
    }
    return (
      <Hint hint={label}>
        <span {...css(localStyles.container)}>{children}</span>
      </Hint>
    );
  }
);