import React, { useEffect } from 'react';
import { audioSrc } from '../audio/kds_audio';
import { CardContainerProps } from '../utils/types';
import KDSCard from '../CardContent';
import '../../globalStyles.css';

export const KDSComponent = (props: CardContainerProps): JSX.Element => {
  const audio = new Audio(audioSrc);
  useEffect(() => {
    audio.play();
  }, []);
  const {
    order,
    venueConfig,
    callOrderApi,
    authProvider,
    kdsDeviceConfigs = {},
    viewMode,
  } = props;
  const {
    buckets,
    payments,
    lastChanged,
    id,
    orderType,
    due,
    extra,
    deliveryAddress = {},
    comments = [],
    users = [],
    verifiedTime,
  } = order;
  return (
    buckets &&
    buckets.map(
      (bucket: any, index: number) =>
        bucket.lines.length > 0 && (
          <KDSCard
            bucket={bucket}
            bucketIndex={index}
            key={id}
            lastChanged={lastChanged}
            orderId={id}
            orderType={orderType}
            payments={payments}
            due={due}
            extra={extra}
            deliveryAddress={deliveryAddress}
            comments={comments}
            users={users}
            venueConfig={venueConfig}
            callOrderApi={callOrderApi}
            authProvider={authProvider}
            verifiedTime={verifiedTime}
            kdsDeviceConfigs={kdsDeviceConfigs}
            viewMode={viewMode}
          />
        )
    )
  );
};