import { observer } from 'mobx-react';
import { SmartInputProps } from './SmartInput.interface';
import { Input } from '../input/Input';
import { AccordionStyles } from '../../templates/Accordion';
import { mergeStyles } from '../../styles/mergeStyles';
import { css, CSSProperties } from 'glamor';
import { IconAi } from '../icons/IconAi';
import { useSmartInput } from './SmartInputModel';
import { useApphouse } from '../../context/useApphouse';
import { AiPromptInput } from './AiInput';
import React from 'react';
/**
 * Styles for the accordion in the smart input component
 */
const SmartInputAccordionStyles: AccordionStyles = {
  container: {},
  panel: {
    content: {
      alignItems: 'flex-start'
    }
  }
};
/**
 * Styles for the AI Icon
 */
const AiIconStyles: CSSProperties = {
  display: 'flex',
  position: 'absolute',
  top: -5,
  right: 0,
  border: 0,
  backgroundColor: 'transparent',

  ':hover': {
    cursor: 'pointer'
  }
};

/**
 * An input that is augmented with AI.
 * It allows users to interact with AI for suggestions and predictions for content in the input.
 * @returns A react component
 */
export const SmartInput = observer((props: SmartInputProps) => {
  const { context, onChange, styleOverwrites, aiIcon, ...rest } = props;
  const {
    inputValueRef,
    setInputRef,
    setContext,
    toggleOpenPrompt,
    setOnChange,
    openPrompt,
    setOpenPrompt
  } = useSmartInput();
  const { theme } = useApphouse();
  const aiIconProps = {
    size: aiIcon?.size || 20,
    color: aiIcon?.color || theme.colors.onPrimary
  };
  const localStyles = {
    accordion: mergeStyles(
      SmartInputAccordionStyles,
      styleOverwrites?.accordion
    ),
    promptInput: styleOverwrites?.promptInput,
    input: styleOverwrites?.input,
    aiIcon: mergeStyles(AiIconStyles, styleOverwrites?.aiIcon)
  };

  const Prompt = (
    <AiPromptInput id="smart-input" styleOverwrites={localStyles.promptInput} />
  );

  const inputRef = React.useRef(null);
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const showPrompt = inputValueRef?.current?.id === inputRef.current?.id;

  return (
    <div
      {...css({
        position: 'relative'
      })}
    >
      <Input
        ref={inputRef}
        onChange={(value) => {
          if (onChange) {
            onChange(value);
          }
        }}
        styleOverwrites={localStyles.input}
        {...rest}
      />
      <button
        title="Enhance with AI"
        onClick={() => {
          if (showPrompt) {
            toggleOpenPrompt();
          } else {
            setOpenPrompt(true);
          }

          setInputRef(inputRef);
          setContext(context);
          if (onChange) {
            // set the onChange function so when the AI model returns a value,
            // it will be passed to the onChange function and update any state
            // that is dependent on the input value outside of the smart input component
            setOnChange(onChange);
          }
        }}
        {...css(localStyles.aiIcon)}
      >
        <IconAi size={aiIconProps.size} color={aiIconProps.color} />
      </button>
      {showPrompt && openPrompt && <div>{Prompt}</div>}
    </div>
  );
});