import { Label } from '@widergy/mobile-ui';
import React, { Component, Fragment } from 'react';
import { Image, View } from 'react-native';
import { useBluetoothContext } from '../../bluetooth/useBluetoothContext';
import DeviceDisconnected from '../../ui/assets/bonding/deviceDisconnected.png';
import ReconnectDevice from '../../ui/assets/bonding/reconnectDevice.png';
import Colors from '../Colors';
import GeneralStep from '../GeneralStep';
import styles from './styles';

interface Translations {
  title: string;
  withoutLinkedDeviceDescription: string;
  withoutLinkedDeviceTextButton: string;
  withLinkedDeviceDescription: string;
  withLinkedDevicePrimaryTextButton: string;
  withLinkedDeviceSecondaryTextButton: string;
  withLinkedSubtitle: string;
}
interface Props {
  reconnectionOrLinkWithProbeTranslations: Translations;
  goToProbeProbePairing: Function;
  children: Component | Element;
}

const NoProbeWrapper = ({
  reconnectionOrLinkWithProbeTranslations: translations,
  goToProbeProbePairing,
  children,
}: Props) => {
  const bluetoothContext = useBluetoothContext();
  const targetDevice = bluetoothContext.targetDevice;

  if (bluetoothContext.connectionError || (!targetDevice && !bluetoothContext.isConnected())) {
    return (
      <GeneralStep
        sourceImage={!targetDevice ? DeviceDisconnected : undefined}
        title={translations.title}
        description={
          targetDevice
            ? translations.withoutLinkedDeviceDescription
            : translations.withLinkedDeviceDescription
        }
        descriptionStyle={targetDevice && styles.descriptionStyle}
        buttons={
          targetDevice
            ? [
                {
                  title: translations.withLinkedDeviceSecondaryTextButton,
                  onPress: () => {
                    bluetoothContext.unlink();
                    goToProbeProbePairing();
                  },
                  key: 'otherDevice',
                  secondary: true,
                },
                {
                  title: translations.withLinkedDevicePrimaryTextButton,
                  onPress: async () => {
                    await bluetoothContext.autoConnect().catch(err => console.log({ err }));
                  },
                  key: 'lastDevice',
                },
              ]
            : [
                {
                  title: translations.withoutLinkedDeviceTextButton,
                  onPress: () => goToProbeProbePairing(),
                  key: 'newDevice',
                },
              ]
        }
      >
        {!!targetDevice && (
          <View style={styles.childrenContainer}>
            <Label big semiBold color={Colors.gray02}>
              {translations.withLinkedSubtitle}
            </Label>
            <View style={styles.imageAndBadgeContainer}>
              <Image source={ReconnectDevice} style={styles.image} />
              <Label big semiBold color={Colors.gray02} style={styles.badge}>
                {targetDevice.name}
              </Label>
            </View>
          </View>
        )}
      </GeneralStep>
    );
  } else {
    return <Fragment>{children}</Fragment>;
  }
};

export default NoProbeWrapper;