import React from "https://esm.sh/react@19/";
import {createRoot} from "https://esm.sh/react-dom@19/client/";
import {initState,reducer} from './reducer.js';
import { pipeline, cos_sim } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers';
import BusySignal from './busy.js';

function Input({id,value,setData}) {
  return (
    <p>
      <label>{id}:
	<input value={value}
	       onChange={e=>setData(id,e.target.value)} />
      </label>
    </p>
  )
}

function App () {
  const [state, dispatch] = React.useReducer(reducer, initState());
  const setData = (key,data) => dispatch({type:'setData', key:key, data:data});
  
  async function compare() {
    if ((state.Sentence1.length<5) || (state.Sentence2.length<5)) {
      setData('error', 'Please enter two sentences.');
      return;
    }
    dispatch({type:'busy'});
    let extractor = await pipeline('feature-extraction');
    let output1 = await extractor(state.Sentence1, { pooling: 'mean', normalize: true });
    let output2 = await extractor(state.Sentence2, { pooling: 'mean', normalize: true });
    let embedding1 = output1.data;
    let embedding2 = output2.data;
    let similarity = cos_sim(embedding1, embedding2);
    dispatch({type:'done', result:similarity});
  }

  return (
    <>
      {state.error && <h3 className='error'>ERROR- {state.error}</h3>}

      <>
	<Input id='Sentence1' value={state.Sentence1} setData={setData} />
	<Input id='Sentence2' value={state.Sentence2} setData={setData} />
	{!state.busy && <button onClick={compare}>Compare</button>}
      </> 
      
      {state.busy && <p className='busyDIV'>Working... <BusySignal  /></p>}
      {state.done && <p>Similarity: {state.result}</p>}
      
    </>
  )
}

createRoot(document.getElementById('root')).render( <React.StrictMode> <App/> </React.StrictMode> );