import { css } from 'glamor';
import { useApphouse } from '../../context/useApphouse';
import { Text } from '../Text';
import { ReactNode } from 'react';
import { observer } from 'mobx-react';
import { InputLabelStyles } from './input.styles.interface';
import { getComponentInputLabelStyles } from './input.component.styles';
import React from 'react';
import { InputStyles } from '../../styles/defaults/themes.interface';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';
/**
 * Label for the input component
 */
export const InputLabel: React.FC<{
  id: string;
  label: ReactNode;
  required?: boolean;
  /**
   * Variant of the input
   * @default 'default'
   */
  variant?: keyof InputStyles;
  styleOverwrites?: InputLabelStyles;
}> = observer(
  ({ id, label, variant = 'm', required = false, styleOverwrites }) => {
    const { theme } = useApphouse();

    const componentStyles: InputLabelStyles = getComponentInputLabelStyles(
      theme,
      variant
    );
    const localStyles = useLocalStyles(componentStyles, styleOverwrites);
    return (
      <Text
        as="label"
        data-xray="InputLabel"
        htmlFor={id}
        data-style="label"
        {...css(localStyles.text)}
      >
        {label}
        {required && (
          <span
            {...css({ color: theme.colors.required }, localStyles.required)}
            data-style="required"
          >
            *
          </span>
        )}
      </Text>
    );
  }
);