import React, {useCallback} from 'react';
import {Linking} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {Box, InfoBlock, BoxProps} from 'components';
import {useI18n, I18n} from '@shopify/react-i18n';
import {SystemStatus, useStartExposureNotificationService} from 'services/ExposureNotificationService';

import {InfoShareView} from './InfoShareView';
import {StatusHeaderView} from './StatusHeaderView';

const SystemStatusOff = ({i18n}: {i18n: I18n}) => {
  const startExposureNotificationService = useStartExposureNotificationService();

  const enableExposureNotifications = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  return (
    <InfoBlock
      icon="icon-exposure-notifications-off"
      title={i18n.translate('OverlayOpen.ExposureNotificationCardStatus')}
      titleBolded={i18n.translate('OverlayOpen.ExposureNotificationCardStatusOff')}
      text={i18n.translate('OverlayOpen.ExposureNotificationCardBody')}
      button={{text: i18n.translate('OverlayOpen.ExposureNotificationCardAction'), action: enableExposureNotifications}}
      backgroundColor="errorBackground"
      color="errorText"
    />
  );
};

const BluetoothStatusOff = ({i18n}: {i18n: I18n}) => {
  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);
  return (
    <InfoBlock
      icon="icon-bluetooth-off"
      title={i18n.translate('OverlayOpen.BluetoothCardStatus')}
      titleBolded={i18n.translate('OverlayOpen.BluetoothCardStatusOff')}
      text={i18n.translate('OverlayOpen.BluetoothCardBody')}
      button={{text: i18n.translate('OverlayOpen.BluetoothCardAction'), action: toSettings}}
      backgroundColor="errorBackground"
      color="errorText"
    />
  );
};

const NotificationStatusOff = ({action, i18n}: {action: () => void; i18n: I18n}) => {
  return (
    <InfoBlock
      icon="icon-notifications"
      title={i18n.translate('OverlayOpen.NotificationCardStatus')}
      titleBolded={i18n.translate('OverlayOpen.NotificationCardStatusOff')}
      text={i18n.translate('OverlayOpen.NotificationCardBody')}
      button={{text: i18n.translate('OverlayOpen.NotificationCardAction'), action}}
      backgroundColor="infoBlockNeutralBackground"
      color="overlayBodyText"
    />
  );
};

interface Props extends Pick<BoxProps, 'maxWidth'> {
  status: SystemStatus;
  notificationWarning: boolean;
  turnNotificationsOn: () => void;
}

export const OverlayView = ({status, notificationWarning, turnNotificationsOn, maxWidth}: Props) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();

  return (
    <Box maxWidth={maxWidth}>
      <Box marginBottom="l">
        <StatusHeaderView enabled={status === SystemStatus.Active} />
      </Box>
      {status !== SystemStatus.Active && (
        <Box marginBottom="m" marginHorizontal="m">
          <SystemStatusOff i18n={i18n} />
        </Box>
      )}
      {status !== SystemStatus.Active && (
        <Box marginBottom="m" marginHorizontal="m">
          <BluetoothStatusOff i18n={i18n} />
        </Box>
      )}
      {notificationWarning && (
        <Box marginBottom="m" marginHorizontal="m">
          <NotificationStatusOff action={turnNotificationsOn} i18n={i18n} />
        </Box>
      )}
      <Box marginBottom="m" marginHorizontal="m">
        <InfoBlock
          icon="icon-enter-code"
          title={i18n.translate('OverlayOpen.EnterCodeCardTitle')}
          text={i18n.translate('OverlayOpen.EnterCodeCardBody')}
          button={{
            text: i18n.translate('OverlayOpen.EnterCodeCardAction'),
            action: () => navigation.navigate('DataSharing'),
          }}
          backgroundColor="infoBlockBrightBackground"
          color="infoBlockBrightText"
        />
      </Box>
      <Box marginBottom="m" marginHorizontal="m">
        <InfoShareView />
      </Box>
    </Box>
  );
};