import { isNil } from 'lodash';
import React, {
  ForwardRefRenderFunction,
  useEffect,
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
} from 'react';
import {
  LayoutChangeEvent,
  NativeScrollEvent,
  NativeSyntheticEvent,
  Platform,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';
import { KeyboardManager } from 'react-native-keyboard-manager';
import Col from '../Col';
import TextButton from '../Modal/TextButton';
import Popup from '../Popup';
import Row from '../Row';
import ShouldRender from '../ShouldRender';
import { FloatingLayerProps, FloatingLayerRef } from './interface';
import createStyle from './styles/floatingLayer.style';
import { useTheme } from '../Theme';
import { useKeyboardDimensions, useMaxHeight } from '../../utils';
import { isValidElement } from 'react';

const FloatingLayer: ForwardRefRenderFunction<
  FloatingLayerRef,
  FloatingLayerProps
> = (
  {
    items,
    textButton,
    onPressTextButton,
    children,
    footer,
    footerStyle,
    containerStyle,
    contentStyle,
    title,
    titleStyle,
    description,
    headerStyle,
    showCancelButton,
    cancelButtonText,
    onCancel,
    cancelBtnIcon,
    showConfirmButton,
    confirmButtonText,
    onConfirm,
    cancelBtnStyle,
    confirmBtnStyle,
    cancelBtnContainerStyle,
    confirmBtnContainerStyle,
    showsVerticalScrollIndicator,
    cancelBtnIconProps,
    containerHeight: innerContainerHeight,
    onContentScroll,
    topExtra,
    headerExtra,
    scrollStyle,
    softInputMode,
    visible,
    useNative = true,
    adaptKeyboardBottom,
    hasMinHeight,
    needScrollView = true,
    ...restProps
  },
  ref
) => {
  const [contentScrollTop, setContentScrollTop] = useState(true);
  const token = useTheme();
  const styles = createStyle(token);
  const maxHeight = useMaxHeight();
  const containerHeightRef = useRef<number>(0);
  const { height: currentKeyboardHeight } = useKeyboardDimensions(true);

  const titleProps = {
    title,
    titleStyle,
    description,
    headerStyle: StyleSheet.flatten([styles.head, headerStyle]),
    showCancelButton,
    cancelButtonText,
    onCancel,
    cancelBtnIcon,
    showConfirmButton,
    confirmButtonText,
    onConfirm,
    cancelBtnStyle,
    confirmBtnStyle,
    cancelBtnContainerStyle,
    confirmBtnContainerStyle,
    cancelBtnIconProps,
  };

  const renderItems = () => {
    if (!Array.isArray(items)) {
      return null;
    }
    const span = Math.max(24 / items?.length, 6);

    return (
      <Row gap={10} style={styles.itemRow}>
        {items?.map((item, index) => (
          <Col span={span} key={index} style={styles.itemCol}>
            {item}
          </Col>
        ))}
      </Row>
    );
  };

  const renderTextButton = () => {
    if (isNil(textButton)) {
      return null;
    }

    return (
      <View style={styles.textButton}>
        <TextButton
          color="#222"
          textStyle={styles.text}
          text={textButton}
          onPress={onPressTextButton}
        />
      </View>
    );
  };

  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const {
      nativeEvent: {
        contentOffset: { y },
      },
    } = event;
    if (y === 0) {
      setContentScrollTop(true);
    } else {
      setContentScrollTop(false);
    }
    onContentScroll?.(event);
  };

  useImperativeHandle(ref, () => {
    return {
      getContainerHeight: () => containerHeightRef.current,
    };
  });

  useEffect(() => {
    if (Platform.OS === 'ios') {
      // 0915：解决iOS键盘问题，统一开启KeyboardManager能力，自动管理键盘
      KeyboardManager.setEnable(true);
    }
  }, []);

  const scrollBottom =
    softInputMode && softInputMode !== 'resize' ? currentKeyboardHeight : 0;

  const onWrapperLayout = ({
    nativeEvent: {
      layout: { height },
    },
  }: LayoutChangeEvent) => {
    containerHeightRef.current = height;
  };

  const containerHeightStyle = innerContainerHeight
    ? {
        height: innerContainerHeight,
      }
    : {};

  const containerScrollStyle = hasMinHeight
    ? styles.containerMinHeightStyle
    : {};

  const wrapperStyle = StyleSheet.flatten([
    styles.wrapper,
    containerStyle,
    scrollStyle,
    containerHeightStyle,
    { maxHeight },
    containerScrollStyle,
  ]);

  const FloatingContentContainer = needScrollView ? (
    <ScrollView
      scrollEnabled={true}
      nativeID="softInputMode_auto_mode_scrollable_tag"
      keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
      scrollEventThrottle={64}
      onScroll={onScroll}
    >
      <View style={[styles.main, contentStyle]}>{children}</View>
      {adaptKeyboardBottom && !footer && !!scrollBottom && (
        <View style={{ height: scrollBottom }} />
      )}
    </ScrollView>
  ) : (
    <>
      {children}
      {adaptKeyboardBottom && !footer && !!scrollBottom && (
        <View style={{ height: scrollBottom }} />
      )}
    </>
  );

  return (
    <Popup
      position="bottom"
      round
      {...restProps}
      softInputMode={softInputMode}
      useNative={useNative}
      contentScrollTop={contentScrollTop}
      visible={visible}
    >
      <View>
        <ShouldRender condition={isValidElement(topExtra)}>
          {topExtra}
        </ShouldRender>
        <View style={wrapperStyle} onLayout={onWrapperLayout}>
          {renderItems()}
          {renderTextButton()}

          <ShouldRender condition={!!children}>
            <Popup.Header {...titleProps} />
            <ShouldRender condition={isValidElement(headerExtra)}>
              {headerExtra}
            </ShouldRender>

            {FloatingContentContainer}

            <ShouldRender condition={!!footer}>
              <View
                style={[
                  styles.footer,
                  footerStyle,
                  adaptKeyboardBottom && { marginBottom: scrollBottom },
                ]}
              >
                {footer}
              </View>
            </ShouldRender>
          </ShouldRender>
        </View>
      </View>
    </Popup>
  );
};

export default forwardRef(FloatingLayer);