import { css } from 'glamor';
import React from 'react';
import { Text } from '../Text';
import { useApphouse } from '../../context/useApphouse';
import { InputComponentStyles } from './input.styles.interface';
import { getComponentInputStyles } from './input.component.styles';
import { InputLabel } from './InputLabel';
import { observer } from 'mobx-react';
import { InputProps } from './input.interface';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';
import { View } from '../View';

/**
 * An wrapper component for an input, it holds the label and description
 */
export const InputWrapper: React.FC<InputProps> = observer((props) => {
  const {
    variant = 'm',
    label,
    children,
    id,
    required = false,
    styleOverwrites,
    gutters,
    width,
    description,
    error
  } = props;
  const { theme } = useApphouse();

  const componentStyles: InputComponentStyles = getComponentInputStyles(
    theme,
    variant
  );
  const localStyles = useLocalStyles(componentStyles, styleOverwrites, gutters);
  const hasError = error !== undefined;
  return (
    <div
      data-xray="InputWrapper"
      data-id="input"
      data-style="container"
      {...css(localStyles.container, { width })}
    >
      <InputLabel
        label={label}
        id={id}
        required={required}
        variant={variant}
        styleOverwrites={localStyles.label}
      />
      {description && (
        <Text
          data-xray="InputDescription"
          variant="caption"
          styleOverwrites={localStyles.description}
          data-style="description"
        >
          {description}
        </Text>
      )}
      {children && (
        <div {...css({ position: 'relative', width: '100%', display: 'flex' })}>
          {children}
        </div>
      )}

      {hasError && (
        <View minHeight={20}>
          <Text color="error" bold>
            {hasError ? error : ' '}
          </Text>
        </View>
      )}
    </div>
  );
});