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 } 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,
  } = props;
  const { toDone, allDone, toPrepare, toConfirm } = getElements(bucket.lines);
  const [isZoomIn, setIsZoomIn] = useState(false);

  useEffect(() => {
    if (isZoomIn) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }
  }, [isZoomIn]);
  return (
    <KDSCardWrapper isZoomIN={isZoomIn}>
      {isZoomIn && <ButtonClose setIsZoomIn={setIsZoomIn} />}
      <CardHeader orderType={orderType} due={due} venueConfig={venueConfig} />
      <OrderDetails
        queuePos={bucket.queuePos}
        lines={bucket.lines}
        lastChanged={lastChanged}
        orderType={orderType}
        payments={payments}
        orderId={orderId}
      />
      <ContentWrapper
        isZoomIn={isZoomIn}
        color={getBackgroundColor(allDone, toDone, toConfirm, toPrepare)}
      >
        <OrderProductsList
          lines={bucket.lines}
          orderId={orderId}
          currency={venueConfig.currency}
          isZoomIN={isZoomIn}
        />
        <UserInformation
          extra={extra}
          deliveryAddress={deliveryAddress}
          comments={comments}
          users={users}
          kdsLayout=""
        />
        <ButtonsContainer
          callOrderApi={callOrderApi}
          setIsZoomIn={setIsZoomIn}
          isZoomIn={isZoomIn}
          lines={bucket.lines}
          orderId={orderId}
          authProvider={authProvider}
        />
      </ContentWrapper>
    </KDSCardWrapper>
  );
};

export default KDSCard;
