import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { renderTextLikeJSX } from '../../core/helpers';
import {
  IconXDoubt1,
  IconXAbnormalprompt1,
} from '../../icons';
import ShouldRender from '../ShouldRender';
import { FieldProps } from './interface';
import createStyle from './styles/field.style';
import { useLocale } from '../Locale/locale';
import { useTheme } from '../Theme';
import NoticeBar from '../NoticeBar';
import Modal from '../Modal';

const Field: React.FC<FieldProps> = ({
  style,
  label,
  labelWrapperStyle,
  labelContainerStyle,
  labelStyle,
  message,
  messageWrapperStyle,
  error,
  errorMessage,
  showErrorIcon = true,
  showDividerLine,
  showErrorDividerLine,
  showQuestionIcon = false,
  onClickQuestionIcon,
  layout = 'vertical',
  children,
  containerStyle,
  prefix,
  suffix,
  requiredMark,
  notice,
  focusComponent,
  tooltip,
  tooltipTitle,
  confirmButtonText,
  hideInternalMessage = false,
}) => {
  const local = useLocale();
  const token = useTheme();
  const styles = createStyle(token);
  const [visible, setVisible] = useState<boolean>(false);

  const renderErrorIcon = () => (
    <IconXAbnormalprompt1
      fillColor={token['--color-danger-7']}
      size={token['--font-size-3']}
      style={styles.errorIcon}
    />
  );

  const renderMessage = () => {
    return (
      <>
        <ShouldRender condition={!!errorMessage}>
          <View
            style={StyleSheet.flatten([
              styles.message,
              showErrorDividerLine && styles.dividerLine,
              styles.dividerLineError,
              { marginBottom: 2 },
              messageWrapperStyle,
            ])}
          >
            <ShouldRender condition={showErrorIcon}>
              {renderErrorIcon()}
            </ShouldRender>
            {renderTextLikeJSX(
              errorMessage,
              StyleSheet.flatten([styles.messageText, styles.messageTextError])
            )}
          </View>
        </ShouldRender>
        <ShouldRender condition={!!notice}>
          <View style={styles.noticeBar}>
            <NoticeBar {...notice} />
          </View>
        </ShouldRender>
        <ShouldRender condition={!!message}>
          <View
            style={StyleSheet.flatten([
              styles.message,
              showDividerLine && styles.dividerLine,
              error && styles.dividerLineError,
              !error && !showDividerLine && styles.messageNormal,
              messageWrapperStyle,
            ])}
          >
            <ShouldRender condition={!!error && showErrorIcon}>
              {renderErrorIcon()}
            </ShouldRender>
            {renderTextLikeJSX(
              message,
              StyleSheet.flatten([
                styles.messageText,
                error && styles.messageTextError,
              ])
            )}
          </View>
        </ShouldRender>
      </>
    );
  };

  const renderLabel = () => {
    return (
      <ShouldRender condition={!!label}>
        <View
          style={StyleSheet.flatten([
            styles.label,
            layout === 'vertical' && styles.labelVertical,
            layout === 'horizontal' && styles.labelHorizontal,
            labelWrapperStyle,
          ])}
        >
          {prefix}
          <View
            style={StyleSheet.flatten([
              styles.labelContainer,
              labelContainerStyle,
            ])}
          >
            <View style={styles.labelTextContainer}>
              {renderTextLikeJSX(
                label,
                StyleSheet.flatten([styles.labelText, labelStyle])
              )}
            </View>
            <ShouldRender condition={!requiredMark}>
              <Text
                style={StyleSheet.flatten([
                  styles.labelText,
                  styles.option,
                  labelStyle,
                ])}
              >
                {local.Field.optional}
              </Text>
            </ShouldRender>
            <ShouldRender condition={showQuestionIcon || !!tooltip}>
              {/* 按压效果完善 */}
              <TouchableOpacity
                onPress={(e) => {
                  if (onClickQuestionIcon) {
                    onClickQuestionIcon?.(e);
                  } else if (tooltip) {
                    setVisible(true);
                  }
                }}
                style={StyleSheet.flatten([styles.questionIcon])}
              >
                <IconXDoubt1
                  size={token['--font-size-3']}
                  fillColor={token['--color-text-3']}
                />
              </TouchableOpacity>
            </ShouldRender>

            <Modal.Component
              title={tooltipTitle}
              message={tooltip}
              visible={visible}
              confirmButtonText={confirmButtonText}
              showCancelButton={false}
              closeOnPressOverlay
              solidButton
              onPressOverlay={() => {
                setVisible(false);
              }}
              onPressConfirm={() => {
                setVisible(false);
              }}
            />
          </View>

          {suffix}
        </View>
      </ShouldRender>
    );
  };

  return (
    <View style={style}>
      <View
        style={StyleSheet.flatten([
          layout === 'horizontal' && styles.controlHorizontal,
          !label && styles.placeholder, // 如果没有传label,需要增加占位样式，保证间距一致性
          { zIndex: 1 },
          containerStyle,
        ])}
      >
        {renderLabel()}
        {focusComponent}
        <View style={styles.childrenContainer}>
          {React.isValidElement(children)
            ? React.cloneElement(children, {
                ...{ renderMessage },
              })
            : children}
        </View>
      </View>
      {!hideInternalMessage && renderMessage()}
    </View>
  );
};

export default Field;