import { useRef, useState } from 'react';
import './App.css'


const BASE_URL='http://localhost:3333';

function App() {
  
  const [history, setHistory] = useState([]);
  const [processing, setProcessing] = useState(false);
  const [prompt, setPrompt] = useState([]);
  

  function onSubmit(event) {
    event.preventDefault();
    const input = event.target.elements.input.value;
    console.log("Submitted:", input);
    
    setProcessing(true);


    fetch(`${BASE_URL}/generate`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ 
        input:[
          ...history,
          {
            role:'user',
            content:[{
              type:'input_text',
              text: input 
            }]
          }
        ]
      }),
    }).then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      response.json().then(data => {;
        console.log(data);

        // add to history
        setHistory(prev => [...prev, {
          role: 'user',
          content: [{
              type:'input_text',
              text: input
          }]
        }, {
          role: 'assistant',
          content: [{
              type:'output_text',
              text: data.output_text
          }]
        }]);              

        setPrompt([
          ...prompt,
          data.prompt,
        ]);

        // clear input
        event.target.elements.input.value = '';
        setProcessing(false);

      });

    });


  }

  return (
    <main className='min-h-screen flex flex-col gap-8 justify-end p-8'>
      <div className='flex flex-col gap-2 border-4'>        
        {prompt?.length==0 ? (
          <div className='p-2 border-b border-gray-200'>Promp will appear here...</div>
        ):(
          prompt?.map((item, index) => (
            <div key={index} className='p-2 border-b border-gray-500'>
              <p className='text-lg'>{item}</p>
            </div>
          ))
        )}
      </div>      
      <div className='flex flex-col gap-2'>
        {/* History will be rendered here */}
        {history?.length==0? (
          <div className='bg-white p-2 rounded border'>History will appear here...</div>
        ):(
          history.map((item, index) => (
            <div key={index} className={`p-2 rounded border-4 ${item.role === 'user' ? 'bg-gray-100' : 'bg-yellow-100'}`}>
              {item.content.map((content, idx) => (
                <p key={idx} className='text-lg'>{content.text}</p>
              ))}
            </div>
          ))
        )}
      </div>      
      <div className=''>
        <form className='flex flex-col justify-center *:border-4 gap-4' onSubmit={onSubmit}>
          <input id="input" name="input" required className='self-stretch p-2'/>
          <button type="submit" className='rounded-full uppercase' disabled={processing}>Send</button>
        </form>
      </div>
    </main>
  )
}

export default App
