import React, {useRef} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import SignatureScreen, {SignatureViewRef} from 'react-native-signature-canvas';
import {Dialog} from '@components';
import {useTheme} from '@shared/theme';

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

export interface Props {
  value?: string;
  visible: boolean;
  onClose: () => void;
  loading?: boolean;
  onOk: (signature: string) => void;
}

function DigitalSignatureModal({
  value,
  visible,
  onClose,
  onOk,
  loading,
}: Props) {
  const ref = useRef<SignatureViewRef>(null);
  const {t} = useTranslation();
  const {theme} = useTheme();

  const onClear = () => {
    ref.current?.clearSignature();
  };

  const onConfirm = () => {
    ref.current?.readSignature();
  };

  const onOkSignature = (signature: string) => !loading && onOk(signature);

  return (
    <Dialog
      locked
      isVisible={visible}
      title={t('general.sign')}
      onClose={onClose}
      footer={{
        primaryButton: {
          text: t('general.sign'),
          onPress: onConfirm,
          isLoading: loading,
          variant: 'primary',
        },
        secondaryButton: {
          text: t('general.clear'),
          onPress: onClear,
          disabled: loading,
        },
      }}>
      <View
        style={[
          styles.signatureScreenContainer,
          {borderColor: theme.border.neutral.default},
        ]}>
        <SignatureScreen
          ref={ref}
          onOK={onOkSignature}
          autoClear={false}
          webStyle={getDigitalSignatureDialogStyle(theme)}
          nestedScrollEnabled
          dataURL={value}
        />
      </View>
    </Dialog>
  );
}

export default DigitalSignatureModal;