"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeModalbox = _interopRequireDefault(require("react-native-modalbox"));
var _reactNativePaper = require("react-native-paper");
var _styles = require("../styles");
var _useConfig = _interopRequireDefault(require("../../../../hooks/useConfig"));
var _enums = require("../../../../enums");
var _url = require("../../../../../core/utils/url");
var _useAuth = _interopRequireDefault(require("../../../../../core/hooks/useAuth"));
var _reactNativeSvg = require("react-native-svg");
var _xml = require("../../../../../core/assets/icons/xml");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const HyperlinkConfig = ({
  isVisibleModal,
  onHyperLinkSubmit,
  setIsVisibleModal,
  hyperlinkItem
}) => {
  var _getUiKitConfig;
  const styles = (0, _styles.useStyles)();
  const theme = (0, _reactNativePaper.useTheme)();
  const {
    getUiKitConfig
  } = (0, _useConfig.default)();
  const [url, setUrl] = (0, _react.useState)((hyperlinkItem === null || hyperlinkItem === void 0 ? void 0 : hyperlinkItem.url) ?? '');
  const {
    client
  } = (0, _useAuth.default)();
  const [customizedText, setCustomizedText] = (0, _react.useState)((hyperlinkItem === null || hyperlinkItem === void 0 ? void 0 : hyperlinkItem.customText) ?? '');
  const [loading, setLoading] = (0, _react.useState)(false);
  const [urlErrorMessage, setUrlErrorMessage] = (0, _react.useState)(null);
  const [customTextErrorMessage, setCustomTextErrorMessage] = (0, _react.useState)(null);
  const invalidURLText = 'Please enter a valid URL.';
  const blockedURLText = 'Please enter a whitelisted URL.';
  const blockedCustomText = 'Your text contains a blocklisted word.';
  const configDoneText = ((_getUiKitConfig = getUiKitConfig({
    page: _enums.PageID.StoryPage,
    component: _enums.ComponentID.HyperLinkConfig,
    element: _enums.ElementID.DoneBtn
  })) === null || _getUiKitConfig === void 0 ? void 0 : _getUiKitConfig.done_button_text) ?? 'Done';
  const reset = (0, _react.useCallback)(() => {
    setUrl('');
    setCustomizedText('');
  }, []);
  const onClosed = (0, _react.useCallback)(() => {
    setIsVisibleModal(false);
  }, [setIsVisibleModal]);
  const handleCancel = (0, _react.useCallback)(() => {
    const hasChanges = url !== ((hyperlinkItem === null || hyperlinkItem === void 0 ? void 0 : hyperlinkItem.url) ?? '') || customizedText !== ((hyperlinkItem === null || hyperlinkItem === void 0 ? void 0 : hyperlinkItem.customText) ?? '');
    if (hasChanges) {
      _reactNative.Alert.alert('Unsaved changes', "Are you sure you want to cancel? Your changes won't be saved.", [{
        text: 'No',
        style: 'cancel'
      }, {
        text: 'Yes',
        style: 'destructive',
        onPress: () => {
          if (hyperlinkItem) {
            setUrl(hyperlinkItem.url);
            setCustomizedText(hyperlinkItem.customText);
          } else {
            reset();
          }
          setUrlErrorMessage(null);
          setCustomTextErrorMessage(null);
          onClosed();
        }
      }]);
    } else {
      onClosed();
    }
  }, [url, customizedText, hyperlinkItem, onClosed, reset]);
  const handleUrl = (0, _react.useCallback)(text => {
    setUrlErrorMessage(null);
    setUrl(text);
    const isValid = (0, _url.checkURLValidation)(text);
    !isValid && setUrlErrorMessage(invalidURLText);
  }, []);
  const handleCustomText = (0, _react.useCallback)(text => {
    setCustomTextErrorMessage(null);
    setCustomizedText(text);
  }, []);
  const validateHyperlinkUrl = (0, _react.useCallback)(async () => {
    if (url.length > 0) {
      const validatedUrl = await client.validateUrls([url]).catch(() => false);
      !validatedUrl && setUrlErrorMessage(blockedURLText);
      return validatedUrl;
    }
    return false;
  }, [client, url]);
  const validateHyperlinkText = (0, _react.useCallback)(async () => {
    if (customizedText.length > 0) {
      const validatedCustomText = await client.validateTexts([customizedText]).catch(() => false);
      !validatedCustomText && setCustomTextErrorMessage(blockedCustomText);
      return validatedCustomText;
    }
    return true;
  }, [client, customizedText]);
  const validateHyperlink = (0, _react.useCallback)(async () => {
    const validUrl = await validateHyperlinkUrl();
    const validText = await validateHyperlinkText();
    validUrl && validText && onHyperLinkSubmit({
      url,
      customText: customizedText
    });
  }, [customizedText, onHyperLinkSubmit, url, validateHyperlinkText, validateHyperlinkUrl]);
  const onSubmit = (0, _react.useCallback)(async () => {
    setLoading(true);
    await validateHyperlink();
    setLoading(false);
  }, [validateHyperlink]);
  const onDeleteHyperlink = (0, _react.useCallback)(() => {
    reset();
    onHyperLinkSubmit();
  }, [onHyperLinkSubmit, reset]);
  const onPressDeleteHyperlink = (0, _react.useCallback)(() => {
    _reactNative.Alert.alert('Remove link?', 'This link will be removed from story', [{
      text: 'Cancel'
    }, {
      text: 'Remove',
      onPress: onDeleteHyperlink,
      style: 'destructive'
    }]);
  }, [onDeleteHyperlink]);
  return /*#__PURE__*/React.createElement(_reactNativeModalbox.default, {
    style: styles.bottomSheet,
    isOpen: isVisibleModal,
    onClosed: onClosed,
    position: "bottom",
    swipeToClose: true,
    swipeArea: 250,
    backButtonClose: true,
    coverScreen: true
  }, /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
    style: styles.commentBottomSheet
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.handleBar
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.titleContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flexContainer
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    onPress: handleCancel,
    style: styles.cancel
  }, "Cancel")), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flexContainer
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.title
  }, "Add link")), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flexContainer
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: [styles.done, url && !urlErrorMessage && !customTextErrorMessage && styles.activeDone],
    disabled: !url || !!urlErrorMessage || !!customTextErrorMessage,
    onPress: onSubmit
  }, configDoneText))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.horizontalSperator
  }), loading && /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
    animating: loading,
    size: "small",
    color: theme.colors.base
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.contentContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.inputContainer, url.length > 0 && urlErrorMessage && styles.alertBorderColor]
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.label
  }, "URL ", /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.requiredSign
  }, "*")), /*#__PURE__*/React.createElement(_reactNative.TextInput, {
    defaultValue: url,
    onChangeText: handleUrl,
    style: styles.input,
    placeholder: "https://www.example.com",
    placeholderTextColor: theme.colors.baseShade2,
    onFocus: validateHyperlinkText
  })), urlErrorMessage && /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.inValidUrl
  }, urlErrorMessage), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.inputContainer, customizedText.length > 0 && customTextErrorMessage && styles.alertBorderColor]
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.rowContainer
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.label
  }, "Customize Link Text"), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.textCount
  }, customizedText.length, "/30")), /*#__PURE__*/React.createElement(_reactNative.TextInput, {
    defaultValue: customizedText,
    onChangeText: handleCustomText,
    style: styles.input,
    placeholder: "Name your link",
    placeholderTextColor: theme.colors.baseShade2,
    maxLength: 30,
    onFocus: validateHyperlinkUrl
  })), customTextErrorMessage ? /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.inValidUrl
  }, customTextErrorMessage) : /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.note
  }, "This Text will show on the link instead of URL."), hyperlinkItem && /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.removeLinkContainer
  }), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.deleteHyperlinkContainer,
    onPress: onPressDeleteHyperlink
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyDraftDeletHyperLink)(),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.removeLink
  }, "Remove link")), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.removeLinkDivider
  })))));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(HyperlinkConfig);
//# sourceMappingURL=HyperLinkConfig.js.map