import {
  IonButton,
  IonButtons,
  IonCol,
  IonGrid,
  IonHeader,
  IonIcon,
  IonImg,
  IonItem,
  IonLabel,
  IonList,
  IonRow,
  IonSpinner,
  IonThumbnail,
  IonToolbar,
} from "@ionic/react";
import {
  XConsole,
  i18,
  AuthenticationClient,
  StringFormatter,
} from "@team_eureka/eureka-ionic-core";
import {
  arrowBackOutline,
  checkmarkCircle,
  chevronDown,
  chevronForward,
  chevronUp,
} from "ionicons/icons";
import moment from "moment";
import React, { Fragment, useEffect, useState } from "react";
import { useHistory } from "react-router";
import ButtonScannerSvg from "../../../../../assets/media/button-scanner.svg";
import PlanogramaSvg from "../../../../../assets/media/planograma.svg";
import "./index.sass";
import locales from "./locales";

const localize = i18(locales);
const cencox = XConsole({ label: "foundratealert-report" });

interface Props {
  product: any;
  productPrice: any;
  goBackHandler: Function;
  onRequestStockCount: Function;
  hasStockCountReport: boolean;
}

const ProductDetail: React.FC<Props> = (props: Props) => {
  // const [itsFetchingPlano, setItsFetchingPlano] = useState<boolean | undefined>(false);
  const [mode, setMode] = useState<"INITIAL_STATE">("INITIAL_STATE");
  // const [urlPdf, setUrlPdf] = useState<string | undefined>(undefined);
  const [isOpen, setIsOpen] = useState(false);
  const [showPdfViewer, setShowPdfViewer] = useState(false);
  const history = useHistory();

  useEffect(() => {
      const fetchData = async () => {
          // try {
          //     setItsFetchingPlano(true);
          //     const userInfo = AuthenticationClient.getInfo();
          //     const result: any = await BomberoClient.getPlanogramaBase64(props.product?.rubro!, userInfo.store, userInfo.country);
          //     setUrlPdf(result.urlPdf)
          // } catch (error) {
          //     cencox.error(error as any);
          // } finally {
          //     setItsFetchingPlano(false);
          // }
      };
      fetchData();
  }, [])

  // const onClickSeeMoreComponentHandler = () => {
  //   setIsOpen(!isOpen);
  // };

  // const onClickShowPlanoHandler = () => {
  //   setShowPdfViewer(true);
  // };

  // const onClosePdfViewerHandler = () => {
  //   setShowPdfViewer(false);
  // };

  const goToScanner = () => {
    history.push(`/product-detail`);
  };

  const renderINITIAL_STATE = () => {
    return (
      <Fragment>
        <div className="product_detail">
          <IonHeader>
            <IonToolbar>
              <IonButtons slot="start">
                <IonButton
                  className="white"
                  onClick={() => props.goBackHandler()}
                >
                  <IonIcon icon={arrowBackOutline} size="large" />
                </IonButton>
              </IonButtons>
            </IonToolbar>
            <IonList>
              <IonItem lines="none">
                <IonThumbnail slot="start">
                  <img src={props.product?.image} alt="" />
                </IonThumbnail>
                <IonLabel className="ion-text-wrap">
                  {StringFormatter.capFirstLetter(props.product?.description!)}
                </IonLabel>
              </IonItem>
              <IonItem lines="none">
                <div className="price_stock__container">
                  <div className="price_stock">
                    <div className="label">{localize("PRICE", "")}</div>
                    <div className="value">{props.productPrice}</div>
                  </div>
                  <div className="price_stock">
                    <div className="label">{localize("STOCK_NRT", "")}</div>
                    <div className="value">
                      {StringFormatter.capFirstLetter(
                        props.product?.stock_nrt!
                      )}
                    </div>
                  </div>
                </div>
              </IonItem>
              {/* {itsFetchingPlano ? (
                <IonGrid>
                  <IonRow className="ion-justify-content-center">
                    <IonCol size="auto">
                      <IonSpinner name="dots" />
                    </IonCol>
                  </IonRow>
                </IonGrid>
              ) : urlPdf ? (
                <IonItem lines="none">
                  <ButtonComponent
                    label="Ver Planograma"
                    icon={chevronForward}
                    click={onClickShowPlanoHandler}
                    img={PlanogramaSvg}
                  ></ButtonComponent>
                </IonItem>
              ) : null} */}
              <div className="product_detail__container">
                <div>EAN</div>
                <div className="text-black">{props.product?.ean}</div>
                <div className="break"></div>
                <div>{localize("ARTICLE", "")}</div>
                <div className="text-black">
                  {parseInt(props.product?.article_number + "")}
                </div>
                <div className="break"></div>
                <div>{localize("PROVIDER", "")}</div>
                <div className="text-black">
                  {StringFormatter.capFirstLetter(props.product?.provider!)}
                </div>
                <div className="break"></div>
                <div>{localize("BRAND", "")}</div>
                <div className="text-black">
                  {StringFormatter.capFirstLetter(props.product?.brand!)}
                </div>
              </div>
              {isOpen ? (
                <>
                  <div className="product_detail__container">
                    <div className="break"></div>
                    <div className="break"></div>
                    <div>{localize("BLOCK_TYPE", "")}</div>
                    <div className="text-black">
                      {StringFormatter.capFirstLetter(
                        props.product?.block_type!
                      ) ?? "-"}
                    </div>
                    <div className="break"></div>
                    <div>{localize("AVERAGE_SALE", "")}</div>
                    <div className="text-black">
                      {props.product?.average_sale!}
                    </div>
                  </div>
                  <IonItem lines="none">
                    <div className="last_reception__container">
                      {localize("LAST_RECEPTION", "")} <strong>-</strong>
                    </div>
                  </IonItem>
                  <IonItem lines="none">
                    <div className="transit_information">
                      <div className="title">
                        {localize("ORDER_TRANSIT", "")}
                      </div>
                      <div>
                        <h4>{localize("UNIT_REQUESTED", "")}</h4>
                        {props.product?.transit_stock}
                      </div>
                      <div>
                        <h4>{localize("DELIVERY_DATE", "")}</h4>
                        {props.product?.transit_stock_date.format(
                          "DD MMM YYYY · HH:mm"
                        )}
                      </div>
                    </div>
                  </IonItem>
                </>
              ) : null}
            </IonList>
            {/* <SeeMoreComponent
              openIcon={chevronUp}
              closedIcon={chevronDown}
              isOpen={isOpen}
              onClickHandler={onClickSeeMoreComponentHandler}
            ></SeeMoreComponent> */}
            <div className="actions__container">
              <IonList>
                <IonItem lines="none">
                  <IonLabel>Acciones</IonLabel>
                </IonItem>
                <IonItem lines="none">
                  {/* <ButtonComponent
                    label="Solicitar conteo de stock"
                    icon={
                      props.hasStockCountReport
                        ? checkmarkCircle
                        : chevronForward
                    }
                    click={props.onRequestStockCount}
                    disabled={props.hasStockCountReport}
                    customClass={
                      props.hasStockCountReport
                        ? "customize_button_component"
                        : ""
                    }
                  ></ButtonComponent> */}
                </IonItem>
              </IonList>
            </div>
            <div className="scanner__button">
              <IonImg
                src={ButtonScannerSvg}
                onClick={() => goToScanner()}
              ></IonImg>
            </div>
          </IonHeader>
        </div>
      </Fragment>
    );
  };

  const renders: Record<typeof mode, any> = {
    INITIAL_STATE: renderINITIAL_STATE,
  };

  return (
    <Fragment>
      {(() => {
        if (!renders[mode]) {
          return <div>{mode}</div>;
        }
        return renders[mode]();
      })()}

      {/* <PdfViewerModalCompoent onClose={onClosePdfViewerHandler} show={showPdfViewer} urlPdf={urlPdf ?? ''}></PdfViewerModalCompoent> */}
    </Fragment>
  );
};

export default ProductDetail;
