import React from 'react';
import { observer } from 'mobx-react';
import { CSSProperties, css } from 'glamor';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { ApphouseComponent } from '../components/component.interfaces';
import { Text } from '../components/Text';
import { View } from '../components/View';

export type ValueWithLabelDirection = 'row' | 'column';

export interface ValueWithLabelStyles {
  container?: CSSProperties;
  value?: CSSProperties;
  label?: CSSProperties;
}

export interface ValueWithLabelProps
  extends ApphouseComponent<ValueWithLabelStyles> {
  /**
   * The value of the component.
   */
  value?: string;
  /**
   * The label of the component.
   */
  label: string;
  /**
   * The direction in which the label and value will be displayed.
   * @optional
   * @default 'column'
   */
  direction?: ValueWithLabelDirection;
  /**
   * If true, the value will be truncated at this width.
   * It will be truncated and be displayed in 1 line.
   * @optional
   * @default false
   */
  truncateWidth?: number;
  /**
   * If true, the value will be bold.
   * @default false
   */
  bold?: boolean;
  /**
   * The children of the component.
   */
  children?: React.ReactNode;
}

export const ValueWithLabel: React.FC<ValueWithLabelProps> = observer(
  (props) => {
    const {
      styleOverwrites,
      gutters,
      label,
      bold = false,
      value,
      truncateWidth,
      direction = 'column',
      children
    } = props;

    const componentStyles: ValueWithLabelStyles = {
      container: {
        display: 'flex',
        flexDirection: direction
      }
    };
    const localStyles = useLocalStyles<ValueWithLabelStyles>(
      componentStyles,
      styleOverwrites,
      gutters
    );
    const truncateValue = truncateWidth !== undefined;
    return (
      <View
        data-xray="ValueWithLabel"
        orientation={direction === 'column' ? 'vertical' : 'horizontal'}
        {...css(localStyles.container)}
        data-style="ValueWithLabel.container"
      >
        <Text
          variant="caption"
          styleOverwrites={localStyles.label}
          data-style="ValueWithLabel.label"
        >
          {label}
        </Text>
        {truncateValue ? (
          <Text
            variant="standard"
            bold={bold}
            styleOverwrites={localStyles.value}
            data-style="ValueWithLabel.value"
            truncate
            width={truncateWidth}
          >
            {value}
          </Text>
        ) : (
          <Text
            variant="standard"
            bold={bold}
            styleOverwrites={localStyles.value}
            data-style="ValueWithLabel.value"
          >
            {value}
          </Text>
        )}
        {children}
      </View>
    );
  }
);