import React, { useState, useEffect } from 'react';

import CardHeader from '../CardHeader';
import OrderDetails from '../OrderDetails';
import OrderProductsList from '../OrderProductsList';
import UserInformation from '../UserInformation';

import { KDSCardProps } from '../utils/types';

import { ContentWrapper, KDSCardWrapper, QueuePosDiv } from './style';
import { getBackgroundColor, getElements } from '../utils/helperFunctions';
import ButtonClose from '../Buttons/ButtonClose';
import ButtonsContainer from '../ButtonsContainer';

const KDSCard = (props: KDSCardProps): JSX.Element => {
  const {
    orderType,
    lastChanged,
    bucket,
    orderId,
    payments,
    due,
    extra,
    deliveryAddress,
    comments,
    users,
    venueConfig,
    callOrderApi,
    authProvider,
    verifiedTime,
    kdsDeviceConfigs,
      viewMode = "1"
  } = props;
  const { toDone, allDone, toPrepare, toConfirm } = getElements(
    bucket.lines,
    kdsDeviceConfigs && kdsDeviceConfigs.KDS_STAGE_DONE
      ? kdsDeviceConfigs.KDS_STAGE_DONE
      : ''
  );
  const [isZoomIn, setIsZoomIn] = useState(false);
  useEffect(() => {
    if (isZoomIn) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }
  }, [isZoomIn]);
  // viewMode === '1' - standard view
  // viewMode === '2' - minimal view, only queueNo & buttons

  return (
    <KDSCardWrapper viewMode={viewMode} isZoomIN={isZoomIn}>
      {isZoomIn && <ButtonClose setIsZoomIn={setIsZoomIn} />}
      {
        viewMode !== "2" && (
            <>
              <CardHeader
                  verifiedTime={verifiedTime}
                  orderType={orderType}
                  due={due}
                  venueConfig={venueConfig}
              />
              <OrderDetails
                  queuePos={bucket.queuePos}
                  lines={bucket.lines}
                  lastChanged={lastChanged}
                  orderType={orderType}
                  payments={payments}
                  orderId={orderId}
                  kdsDeviceConfigs={kdsDeviceConfigs}
              />
            </>
          )
      }

      <ContentWrapper
        isZoomIn={isZoomIn}
        viewMode={viewMode}
        color={getBackgroundColor(allDone, toDone, toConfirm, toPrepare)}
      >
        {viewMode !== "2" && (
            <>
              <OrderProductsList
                  lines={bucket.lines}
                  orderId={orderId}
                  currency={venueConfig.currency}
                  isZoomIN={isZoomIn}
                  kdsDeviceConfigs={kdsDeviceConfigs}
              />
              <UserInformation
                  extra={extra}
                  deliveryAddress={deliveryAddress}
                  comments={comments}
                  users={users}
                  kdsLayout=""
              />
            </>
        )}
        {viewMode === "2" && (
            <QueuePosDiv
                color='#ddd'>
              #{bucket.queuePos}
            </QueuePosDiv>
        )}

        <ButtonsContainer
          callOrderApi={callOrderApi}
          setIsZoomIn={setIsZoomIn}
          isZoomIn={isZoomIn}
          lines={bucket.lines}
          orderId={orderId}
          authProvider={authProvider}
          kdsDeviceConfigs={kdsDeviceConfigs}
          viewMode={viewMode}
        />
      </ContentWrapper>
    </KDSCardWrapper>
  );
};

export default KDSCard;
