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;