import React from 'react';
import Loader from '@components/Loader';
import { getPlateRecognized } from '@actions/CaptureActions';
import Button from '@components/Button';

const UploadCapture = ({ imgSrc, onBackClick }) => {
  const onUploadClick = () => {
    getPlateRecognized(imgSrc);
  };
  return (
    <div className="container">
      <div className="row">
        <img src={imgSrc} alt="captured" />
      </div>
      <div className="row button-container">
        <Button text="Back" onClick={onBackClick} />
        <Button text="Upload" onClick={onUploadClick} />
      </div>
    </div>
  );
};

const Capture = ({
  imgSrc, isCapturing, error, onBackClick,
}) => (
  <div className="capture-container row">
    {isCapturing && (<Loader />)}
    {error ? (<p>{error}</p>) : (<UploadCapture imgSrc={imgSrc} onBackClick={onBackClick} />)}
  </div>
);

export default Capture;
