import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';

import { Button } from '@redocly/theme/components/Button/Button';
import { SendIcon } from '@redocly/theme/icons/SendIcon/SendIcon';
import { useThemeHooks } from '@redocly/theme/core/hooks';

type SearchAiConversationInputProps = {
  onMessageSent: (message: string) => void;
  isGeneratingResponse: boolean;
  placeholder?: string;
  className?: string;
};

export function SearchAiConversationInput({
  isGeneratingResponse,
  onMessageSent,
  className,
  placeholder,
}: SearchAiConversationInputProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const inputRef = useRef<HTMLInputElement>(null);
  const [query, setQuery] = useState('');

  useEffect(() => {
    if (!isGeneratingResponse && inputRef.current) {
      requestAnimationFrame(() => {
        inputRef.current?.focus();
      });
    }
  }, [isGeneratingResponse]);

  const handleSendMessage = () => {
    setQuery('');
    onMessageSent(query);
  };

  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && !isGeneratingResponse) {
      handleSendMessage();
    }
  };

  const isDisabled = isGeneratingResponse || query.trim().length === 0;

  return (
    <SearchAiConversationInputWrapper
      data-component-name="Search/SearchAiConversationInput"
      className={className}
    >
      <ConversationInput
        ref={inputRef}
        type="text"
        placeholder={
          placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?')
        }
        onChange={(e) => setQuery(e.target.value)}
        onKeyUp={handleOnKeyUp}
        value={query}
        disabled={isGeneratingResponse}
      />
      <SendButton
        disabled={isDisabled}
        size="small"
        icon={
          <SendIcon
            color={
              isDisabled
                ? '--button-content-color-disabled'
                : 'var(--search-ai-conversation-input-send-button-icon-color)'
            }
          />
        }
        onClick={handleSendMessage}
      />
    </SearchAiConversationInputWrapper>
  );
}

const SearchAiConversationInputWrapper = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--search-ai-conversation-input-bg-color);
  position: relative;
`;

const ConversationInput = styled.input`
  width: 100%;
  padding: var(--search-ai-conversation-input-padding);
  border: var(--search-ai-conversation-input-border);
  border-radius: var(--search-ai-conversation-input-border-radius);
  background-color: var(--search-ai-conversation-input-bg-color);
  position: relative;
  font-size: var(--search-ai-conversation-input-font-size);

  &::placeholder {
    color: var(--search-ai-conversation-input-placeholder-color);
  }

  &:focus {
    outline: none;
    border-color: var(--search-ai-conversation-input-border-color-focus);
  }

  &:focus:disabled {
    border-color: var(--search-ai-conversation-input-border-color-disabled);
  }
`;

const SendButton = styled(Button)`
  position: absolute;
  right: var(--search-ai-conversation-input-send-button-right);
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
  background-color: var(--search-ai-conversation-input-send-button-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
  }

  &:disabled {
    background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
    border: var(--search-ai-conversation-input-send-button-border-disabled);
  }
`;