import React, { useContext } from 'react';
import RootContext from '@context/RootContext';
import Button from '@components/common/Button';

const RecognitionResults = () => {
  const { state: { alpr: { results } } } = useContext(RootContext);

  const getPlate = () => {
    if (results.length === 0) {
      return (<h2>No plate detected</h2>);
    }
    console.log(results);
    const { score, plate } = results[0];
    return (
      <>
        <div className="row">
          <h2>{plate.toUpperCase()}</h2>
          <h3>
            Confidence
            {' '}
            {score}
          </h3>
        </div>
        <div className="row">
          <Button text="Fetch data" />
        </div>
      </>
    );
  };
  return (
    <div className="container">
      {getPlate()}
    </div>
  );
};

export default RecognitionResults;
