import React, {useRef} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import SignatureScreen, {SignatureViewRef} from 'react-native-signature-canvas';
import ActivityIndicator from '@components/ActivityIndicator';
import ScrollviewDialog from '@components/ScrollviewDialog';
import FormLabel from '@modules/form/layouts/FormLayout/components/FormInputLayout/components/FormLabel';
import {useInstanceProp} from '@redux/selectors';
import {windowDimensions} from '@shared/constants';
import {SHARED_STRINGS} from '@shared/strings';

import {getDigitalSignaturePopupStyle, styles} from './styles';

export interface DigitalSignaturePopupProps {
  visible: boolean;
  onTouchOutside: () => void;
  label: string;
  maxHeight?: number;
  required?: boolean;
  loading?: boolean;
  onAccept: (signature: string) => void;
  height?: number;
  style?: StyleProp<ViewStyle>;
  color?: string;
}

/**
 * @deprecated - Use `DigitalSignatureDialog`, it's build with HuGo :)
 */
function DigitalSignaturePopup({
  visible,
  onTouchOutside,
  label,
  maxHeight = windowDimensions.height,
  required,
  onAccept,
  loading,
  height,
  style,
  color,
}: DigitalSignaturePopupProps) {
  const ref = useRef<SignatureViewRef>(null);
  const {t} = useTranslation();
  const instanceColor = useInstanceProp('color');
  const primaryColor = color || instanceColor;

  return (
    <ScrollviewDialog
      visible={visible}
      onTouchOutside={onTouchOutside}
      title={<FormLabel label={label} required={required} />}
      titleStyle={styles.title}
      maxHeight={maxHeight}
      disableScroll>
      <View style={[styles.signatureScreenContainer, style]}>
        <SignatureScreen
          ref={ref}
          onOK={signature => !loading && onAccept(signature)}
          autoClear={false}
          descriptionText={''}
          confirmText={t(SHARED_STRINGS.ACCEPT)}
          clearText={t(SHARED_STRINGS.CLEAR)}
          webStyle={getDigitalSignaturePopupStyle(primaryColor, height)}
        />
      </View>
      {loading && (
        <ActivityIndicator
          size="large"
          color={primaryColor}
          style={styles.activityIndicator}
        />
      )}
    </ScrollviewDialog>
  );
}

export default DigitalSignaturePopup;