import React, { useContext } from 'react';
import RootContext from '@context/RootContext';
import Button from '@components/common/Button';
import { fetchDataForPlate } from '@actions/CaptureActions';
import DataView from './DataView';

const RecognitionResults = () => {
  const { state, dispatch } = useContext(RootContext);

  const { results, lastFetchedDataPlate } = state.alpr;

  const fetchData = (plate) => plate && fetchDataForPlate(plate)(dispatch);

  console.log(results);
  const getPlate = () => {
    if (!results || !results.plate) {
      return (<h2>No plate detected</h2>);
    }
    return (
      <>
        <DataView />
        <div className="row">
          <Button text="Fetch data" onClick={() => fetchData(results.plate)} />
        </div>
      </>
    );
  };
  return (
    <div className="container">
      {getPlate()}
    </div>
  );
};

export default RecognitionResults;
