import React, { useState } from 'react';
import { View } from 'react-native';
import { useBluetoothContext } from '@widergy/sfp-mobile-toolbox';

import { configForState } from './constants';
import styles from './styles';
import type { ProbePairingTranslations } from './types';

interface Props {
  onClose: Function;
  translations: ProbePairingTranslations;
  onSetTargetDevice: Function;
  style?: {
    container?: object;
    renderContent?: object;
  };
}

const ProbePairing = ({ onClose, translations, onSetTargetDevice, style }: Props) => {
  const bluetoothContext = useBluetoothContext();
  const [selectedDevice, setSelectedDevice] = useState(null);
  const config = configForState({
    bluetoothContext,
    closeProbeLinkage: onClose,
    selectedDevice,
    setSelectedDevice,
    translations,
    onSetTargetDevice,
  });

  return (
    <View style={[styles.container, style?.container]}>
      <View style={[styles.renderContent, style?.renderContent]}>{config?.renderContent()}</View>
    </View>
  );
};

export default ProbePairing;