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

const DataView = () => {
  const { state, dispatch } = useContext(RootContext);
  const { results, lastFetchedDataPlate } = state.alpr;

  const { plate, score } = results;
  return (
    <div className="row">
      <h2>{plate.toUpperCase()}</h2>
      <h3>
        Confidence
        {' '}
        {score}
      </h3>
      {lastFetchedDataPlate === plate && (
        <ul>
          {Object.entries(results).map(([key, value]) => (
            <li key={`${key}`}>
              <b>{key}</b>
              {' '}
              :
              {' '}
              {value}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DataView;
