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

const BottomNavigation = () => {
  const { state: { state, alpr: { results } }, dispatch } = useContext(RootContext);

  switch (state.view) {
  case VIEW.alprResults:
    return (
      <>
        <div className="row">
          <Button text="Fetch data" onClick={() => fetchDataForPlate(results[0].plate)(dispatch)} />
        </div>
      </>
    );
  case VIEW.camera:
  default:
    return null;
  }
};

export default BottomNavigation;
