import { observer } from 'mobx-react';
import { Button } from '../Button';
import { IconAi } from '../icons/IconAi';
import { Input } from '../input/Input';
import { InputComponentStyles } from '../input/input.styles.interface';
import { useSmartInput } from './SmartInputModel';
import { useApphouse } from '../../context/useApphouse';
import { mergeStyles } from '../../styles/mergeStyles';
import { LoadingGradient } from '../../templates/LoadingGradient';
import { css } from 'glamor';

interface PromptProps {
  id: string;
  styleOverwrites?: InputComponentStyles;
}
/**
 * An Ai Input Prompt
 */
export const AiPromptInput = observer((props: PromptProps) => {
  const { id, styleOverwrites } = props;
  const { aiPrompt, setAiPrompt, query, loading } = useSmartInput();
  const { theme } = useApphouse();
  const localStyles = mergeStyles(
    {
      container: {
        width: '100%'
      },
      input: {
        width: '100%',
        minHeight: '100px'
      }
    },
    styleOverwrites
  );
  return (
    <div
      {...css({
        display: 'flex',
        flexDirection: 'row',
        gap: 10,
        alignItems: 'flex-end'
      })}
    >
      <Input
        placeholder="Provide a description of the desired enhancements or content creation for the input."
        multiline
        id={`${id}-ai`}
        onChange={(value) => {
          setAiPrompt(value);
        }}
        styleOverwrites={localStyles}
        value={aiPrompt}
      />
      <div>
        <Button title="Enhance with AI" onClick={() => query()}>
          {loading && (
            <LoadingGradient
              colors={[
                '#6359f8',
                '#9c32e2',
                '#f36896',
                '#6359f8',
                '#9c32e2',
                '#f36896',
                '#6359f8'
              ]}
              size={1}
              speed={2}
            />
          )}
          Apply <IconAi color={theme.styles.button.primary.color} />
        </Button>
      </div>
    </div>
  );
});