import { ScrollView } from "@tarojs/components";
import { Component } from "react";
import { UpLoading } from "@src/components/PupPetry/Loading";
import Taro from "@tarojs/taro";

interface State {
  isShow: boolean; // 是否开启刷新状态
  isBoShow: boolean; // 是否开启下拉刷新状态
  isNull: boolean; // 是否还有数据
  filterHeight: number; // 容器排除的高度
}

interface Props {
  children: any; // 渲染的子元素
  filterClassName: string; // 要排除的元素的高度
  navHeight: number; // 头部导航高度
  refresh?: () => Promise<any>; // 刷新
  load?: () => Promise<any>; // 加载
  callback?: (num: any) => void; // 返回滚动距离
  reloadState?: boolean;
}

/**页面上下加载*/
class ScrollViewHoc extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  state: State = {
    isShow: false,
    isBoShow: false,
    isNull: false,
    filterHeight: 0,
  };

  //**向上刷新 */
  onScrollToUpper = () => {
    if (!this.props.refresh) {
      setTimeout(() => {
        this.setState({ isShow: false });
      }, 500);
      console.log("请传入自定义refresh事件");
      return;
    }
    let { isShow } = this.state;
    if (!isShow) {
      console.log("下拉");
      this.setState({ isShow: true }, async () => {
        if (this?.props?.refresh) {
          await this?.props?.refresh().then(() => {
            setTimeout(() => {
              this.setState({ isShow: false });
            }, 500);
          });
        }
      });
    }
  };

  /**向下加载 */
  onScrollToLower = () => {
    if (!this.props.load) {
      console.log("请传入自定义load事件");
      return;
    }
    let { isBoShow } = this.state;
    if (!isBoShow) {
      console.log("上拉");
      this.setState({ isBoShow: true }, () => {
        if (this?.props?.load) {
          this?.props?.load()
            .then(() => {
              this.setState({ isNull: false });
            })
            .catch(() => {
              this.setState({ isNull: true, isBoShow: false });
            });
          setTimeout(() => {
            this.setState({ isBoShow: false });
          }, 500);
        }
      });
    }
  };

  // 初始获取 filterClassName 元素的高度
  componentDidMount() {
    this.calculateFilterHeight();
  }

  // 当 reloadState 变化时重新获取 filterClassName 元素的高度
  componentDidUpdate(prevProps: Props) {
    if (prevProps.reloadState !== this.props.reloadState) {
      this.calculateFilterHeight();
    }
  }

  calculateFilterHeight = () => {
    console.log("calculateFilterHeight")
    let { filterClassName, navHeight = 0 } = this.props;
    if (filterClassName) {
      Taro.createSelectorQuery()
        .select(filterClassName) // 选择器，用于选择要获取信息的元素
        .boundingClientRect() // 获取节点的布局信息
        .exec((res) => {
          if (res[0]) {
            const height = res[0].height; // 获取元素的高度
            this.setState({ filterHeight: height + navHeight });
          } else {
            console.log("未找到指定元素");
          }
        });
    }
  };

  render() {
    const { children, reloadState } = this.props;
    const { filterHeight } = this.state;
    return (
      <ScrollView
        lowerThreshold={filterHeight}
        refresherTriggered={this.state.isShow}
        style={{ height: `calc(100vh - ${filterHeight}px)` }}
        onScrollToLower={this.onScrollToLower}
        onScroll={(evt) => {
          this.props.callback?.(evt.detail.scrollTop);
        }}
        className="scrollview"
        scrollY={true}
        onRefresherRefresh={() => {
          this.onScrollToUpper();
        }}
        refresherDefaultStyle="black"
        scrollWithAnimation={true}
      >
        <>
          {children}
          {this.state.isBoShow && <UpLoading />}
        </>
      </ScrollView>
    );
  }
}

export default ScrollViewHoc;