"use strict";

import { forwardRef, useContext, useImperativeHandle, useRef, useState } from 'react';
import { TextInput, TouchableOpacity, View } from 'react-native';
import styles from "./styles.js";
import { Text } from "../Text/index.js";
import { ErrorView, FloatingView, getBorderColor, getFontStyle } from "./common.js";
import { Icon } from "../Icon/index.js";
import { ApplicationContext } from "../Context/index.js";
import { Spacing } from "../Consts/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const InputTextArea = /*#__PURE__*/forwardRef(({
  error,
  onChangeText,
  floatingIconColor,
  floatingIcon,
  floatingValue,
  onFocus,
  onBlur,
  disabled,
  maxLength = 300,
  required,
  style,
  ...props
}, ref) => {
  const inputRef = useRef(null);
  const {
    theme
  } = useContext(ApplicationContext);
  const [focused, setFocused] = useState(false);
  const [inputValue, setInputValue] = useState(props.defaultValue ?? '');
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    blur: () => {
      inputRef.current?.blur();
    },
    clear: onClearText,
    setText: value => {
      inputRef.current?.setNativeProps?.({
        text: value
      });
      _onChangeText(value);
    }
  }));
  const onClearText = () => {
    inputRef.current?.clear();
    _onChangeText('');
  };
  const _onChangeText = text => {
    onChangeText?.(text);
    setInputValue(text);
  };
  const _onFocus = e => {
    setFocused(true);
    onFocus?.(e);
  };
  const _onBlur = e => {
    setFocused(false);
    onBlur?.(e);
  };
  const renderCountingView = () => {
    return /*#__PURE__*/_jsx(View, {
      style: styles.countingView,
      children: /*#__PURE__*/_jsx(Text, {
        color: theme.colors.text.hint,
        typography: 'caption2',
        children: `${inputValue.length}/${maxLength}`
      })
    });
  };
  const renderInputView = () => {
    const disabledColor = theme.colors.text.disable;
    let textColor = theme.colors.text.default;
    let placeholderColor = theme.colors.text.hint;
    if (disabled) {
      textColor = disabledColor;
      placeholderColor = disabledColor;
    }
    return /*#__PURE__*/_jsxs(View, {
      style: [styles.textAreaWrapper, {
        backgroundColor: theme.colors.background.surface
      }, !!floatingValue && {
        marginTop: Spacing.S
      }, getBorderColor(theme, focused, error, disabled)],
      children: [/*#__PURE__*/_jsx(FloatingView, {
        floatingValue: floatingValue,
        floatingIconColor: floatingIconColor,
        disabled: disabled,
        floatingIcon: floatingIcon,
        required: required
      }), /*#__PURE__*/_jsxs(View, {
        style: styles.rowArea,
        children: [/*#__PURE__*/_jsx(View, {
          style: styles.textAreaView,
          children: /*#__PURE__*/_jsx(TextInput, {
            ref: inputRef,
            ...props,
            editable: !disabled,
            style: [styles.textArea, getFontStyle(theme, 'small'), {
              color: textColor,
              lineHeight: undefined
            }, style],
            textBreakStrategy: "highQuality",
            multiline: true,
            onChangeText: _onChangeText,
            onFocus: _onFocus,
            onBlur: _onBlur,
            selectionColor: theme.colors.primary.default,
            placeholderTextColor: placeholderColor
          })
        }), focused && /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: onClearText,
          children: /*#__PURE__*/_jsx(Icon, {
            name: "close",
            size: 18,
            color: theme.colors.text.hint
          })
        })]
      }), renderCountingView()]
    });
  };
  return /*#__PURE__*/_jsxs(View, {
    style: styles.wrapper,
    children: [renderInputView(), /*#__PURE__*/_jsx(ErrorView, {
      error: error
    })]
  });
});
export default InputTextArea;
//# sourceMappingURL=InputTextArea.js.map