import { observer } from 'mobx-react';
import React from 'react';
import { InputWrapper } from './input/InputWrapper';
import { Select, SelectProps, SelectStyles } from './Select';
import { InputProps } from './input/input.interface';
import { ApphouseComponent } from './component.interfaces';
import { InputComponentStyles } from './input/input.styles.interface';
import { mergeStyles, omit, useApphouse } from '..';
import { InputStyles } from '../styles/defaults/themes.interface';
import { toRems } from '../utils/units/toRems';

export interface InputSelectStyles {
  input?: InputComponentStyles;
  select?: SelectStyles;
}
export interface InputSelectProps
  extends Omit<
      InputProps,
      'styleOverwrites' | 'onChange' | 'size' | 'value' | 'variant'
    >,
    Omit<SelectProps, 'styleOverwrites' | 'variant' | 'size'>,
    ApphouseComponent<InputSelectStyles> {
  variant?: keyof InputStyles;
}
/**
 * A wrapper on the select component that adds label and description
 */
export const InputSelect: React.FC<InputSelectProps> = observer(
  (props: InputSelectProps) => {
    const {
      id,
      options,
      onChange,
      value,
      variant = 'm',
      styleOverwrites,
      ...rest
    } = props;
    const {
      theme: { styles }
    } = useApphouse();
    const selectStyles = mergeStyles<SelectStyles>(
      {
        select: {
          ...styles.input[variant],
          color: 'inherit',
          paddingRight: toRems(60)
        }
      },
      styleOverwrites?.select
    );

    return (
      <InputWrapper
        id={id}
        variant={variant}
        styleOverwrites={styleOverwrites?.input}
        {...omit(rest, ['variant'])}
        data-xray="InputSelect"
      >
        <Select
          id={id}
          variant="select"
          styleOverwrites={selectStyles}
          options={options}
          onChange={(newValue) => {
            onChange(newValue);
          }}
          value={`${value}`}
          size={variant}
          {...rest}
        />
      </InputWrapper>
    );
  }
);