import React from "https://esm.sh/react@19/";
import {createRoot} from "https://esm.sh/react-dom@19/client/";
import {initState,reducer} from './reducer.js';

var converter = new showdown.Converter();

function DL({caption,data}) {
  // caption should be text
  // data should be an array, each row contains 2 elements
  return (
    <table>
      {caption && <caption>{caption}</caption>}
    </table>
  )
}

function App () {

  const [state, dispatch] = React.useReducer(reducer, initState());
  const setData = (key,value) => dispatch({type:'setData', key:key, value:value});
  
  // show HuggingFace API
  // fetch https://huggingface.co/.well-known/openapi.json

  const getOpenAPI = () => {
    fetch('https://huggingface.co/.well-known/openapi.json')
      .then(response => {
	if (!response.ok) throw ('Unable to fetch openapi.json.');
	return response.json();
      })
      .then(data => {
	console.dir(data);
	setData('api', data);
      })
      .catch(err=> setData('error', err.toString()))
  }
  React.useEffect(()=>getOpenAPI(), []);
  
  return (
    <div>
      {state.error && <h3 className='error'>{state.error}</h3>}
      
      {state?.api?.info &&
       <>
	 <h1>{state.api.info.title}</h1>
	 <p dangerouslySetInnerHTML={{ __html: converter.makeHtml(state.api.info.description) }} />
       </>
      }
      
      </div>
  )
}

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