import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { useState } from 'react';
import { BsSearch } from 'react-icons/bs';
import { DEFAULT_INPUT_HEIGHT } from '../styles/getInputStyles';
import { useApphouse } from '../context/useApphouse';
import { Button } from './Button';
import { ApphouseComponent } from './component.interfaces';
import { Input } from './input/Input';
import { ApphouseTheme } from '../styles/defaults/themes.interface';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';

/**
 * Interface for styles to be applied to the search input component
 */
export interface SearchInputStyles {
  /**
   * Styles for the container of the search input.
   */
  container?: CSSProperties;
  /**
   * Styles for the input component.
   */
  input?: CSSProperties;
  /**
   * Styles for the button component.
   */
  button?: CSSProperties;
  /**
   * Styles for the wrapper of the search icon.
   */
  icon?: CSSProperties;
}

interface SearchInputProps extends ApphouseComponent<SearchInputStyles> {
  /**
   * Unique id for the input
   */
  id: string;
  /**
   * If true, it will hide the search icon.
   * @default false
   */
  hideSearchIcon?: boolean;
  /**
   * A callback to be triggered when the user clicks the search button.
   */
  onSearchClick: () => void;
  /**
   * A callback to be triggered when the user types in the input box
   */
  onChange?: (value: string) => void;
  /**
   * The value of the input box.
   */
  value?: string;
}
/**
 * A search input component.
 * It contains an input and a button to trigger the search.
 * as well an icon
 */
export const SearchInput: React.FC<SearchInputProps> = observer(
  ({
    hideSearchIcon = false,
    id,
    onChange,
    onSearchClick,
    styleOverwrites,
    gutters,
    value: InitialValue
  }) => {
    const [value, setValue] = useState(InitialValue);
    const { theme } = useApphouse();
    const componentStyles: SearchInputStyles = getSearchInputStyles(theme);
    const localStyles = useLocalStyles(
      componentStyles,
      styleOverwrites,
      gutters
    );
    return (
      <div
        data-xray="SearchInput"
        {...css(localStyles.container)}
        data-style="container"
      >
        {!hideSearchIcon && (
          <div {...css(localStyles.icon)} data-style="icon">
            <BsSearch data-style="icon" />
          </div>
        )}
        <Input
          id={id}
          value={value}
          onChange={(v: string) => {
            setValue(v);
            onChange && onChange(v);
          }}
          styleOverwrites={{
            input: localStyles.input
          }}
        />
        <Button
          variant="brand"
          styleOverwrites={localStyles.button}
          onClick={onSearchClick}
        >
          Search
        </Button>
      </div>
    );
  }
);

export const getSearchInputStyles = (
  theme: ApphouseTheme
): SearchInputStyles => {
  const { styles, tokens, colors } = theme;
  return {
    container: {
      ...styles.layout?.horizontal,
      gridGap: 0,
      position: 'relative'
    },
    icon: {
      position: 'absolute',
      top: tokens.spacings.l,
      left: tokens.spacings.m,
      color: colors.onPrimary
    },
    input: {
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
      paddingLeft: '40px',
      outline: 'none',
      width: '400px',
      [tokens.mediaQuery.smallScreens]: {
        width: '100%'
      }
    },
    button: {
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
      marginLeft: 0,
      height: DEFAULT_INPUT_HEIGHT + 4
    }
  };
};