import React from 'react';
import { LevelName } from './NotificationsComponent';
import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
import { MethodComponent } from './MethodComponent';

type DeviceConnectionProps = {
  fullAccessPath: string;
  props: DataServiceJSON;
  isInstantUpdate: boolean;
  addNotification: (message: string, levelname?: LevelName) => void;
  displayName: string;
  id: string;
};

export const DeviceConnectionComponent = React.memo(
  ({
    fullAccessPath,
    props,
    isInstantUpdate,
    addNotification,
    displayName,
    id
  }: DeviceConnectionProps) => {
    const { connected, connect, ...updatedProps } = props;
    const connectedVal = connected.value;

    return (
      <div className="deviceConnectionComponent" id={id}>
        {!connectedVal && (
          <div className="overlayContent">
            <div>
              {displayName != '' ? displayName : 'Device'} is currently not available!
            </div>
            <MethodComponent
              fullAccessPath={`${fullAccessPath}.connect`}
              docString={connect.doc}
              addNotification={addNotification}
              displayName={'reconnect'}
              id={id + '-connect'}
              render={true}
            />
          </div>
        )}
        <DataServiceComponent
          props={updatedProps}
          isInstantUpdate={isInstantUpdate}
          addNotification={addNotification}
          displayName={displayName}
          id={id}
        />
      </div>
    );
  }
);
