import {
  IonButton,
  IonButtons,
  IonHeader,
  IonIcon,
  IonToolbar,
} from "@ionic/react";
import { arrowBack } from "ionicons/icons";
import React, { Fragment } from "react";
import {i18} from "@team_eureka/eureka-ionic-core";
import "./index.sass";
import locales from "./locales";

const localize = i18(locales);

interface IProps {
  onBarCodeScannerResultHandler: (result: string) => void;
  onGoBackHandler: () => void;
  onClickManuallyButtonHandler: () => void;
  show: boolean;
}

const BarCodeScannerComponent: React.FC<IProps> = (props: IProps) => {
  const goBackButtonHandler = async () => {
    props.onGoBackHandler();
  };

  const onClickManuallyButtonHandler = async () => {
    props.onClickManuallyButtonHandler();
  };

  return (
    <Fragment>
      {props.show && (
        <div className="code-scanner">
          <IonHeader>
            <IonToolbar>
              <IonButtons slot="start">
                <IonButton
                  fill="clear"
                  onClick={() => goBackButtonHandler()}
                  className="no-border"
                >
                  <IonIcon
                    icon={arrowBack}
                    size="large"
                    color="white"
                  ></IonIcon>
                </IonButton>
              </IonButtons>
            </IonToolbar>
          </IonHeader>

          <div className="scanner-container">
            <div className="w100">
              <p>{localize("DESCRIPTION_TEXT", "")}</p>
            </div>
            <div className="scanner-zone-container">
              <div></div>
              <div className="scanner-zone"></div>
              <div></div>
            </div>
            <div className="w100">
              <IonButton onClick={() => onClickManuallyButtonHandler()}>
                {localize("BUTTON_TEXT", "")}
              </IonButton>
            </div>
          </div>
        </div>
      )}
    </Fragment>
  );
};

export default BarCodeScannerComponent;