"use strict";

import React from "react";
import {
  StyleSheet,
  StyleProp,
  ViewStyle,
  ImageURISource,
  ImageRequireSource,
} from "react-native";
import ViewPager from "@react-native-community/viewpager";
import Scene from "./Scene";

const styles = StyleSheet.create({
  viewPager: {
    flex: 1,
  },
});

export type IconType = ImageURISource | ImageRequireSource;

export interface RouteProps {
  key: string;
  title: string;
  icon?: IconType;
  badge?: number;
}

export interface SceneProps {
  route: RouteProps;
  index: number;
  jumpTo: (index: number) => void;
}

export interface MyViewPagerProps {
  style?: StyleProp<ViewStyle>;
  routes: Array<RouteProps>;
  onIndexChange?: (index: number, callback: () => void) => void;
  sceneContainerStyle?: StyleProp<ViewStyle>;
  renderScene: ({ route, index, jumpTo }: SceneProps) => React.ReactNode;
  bounces?: boolean;
  lazy?: boolean;
  lazyPreloadDistance?: number;
  renderLazyPlaceholder?: () => React.ReactNode;
  keyboardDismissMode?: "none" | "on-drag";
  swipeEnabled?: boolean;
  onSwipeStart?: () => void;
  onSwipeEnd?: () => void;
  onPagerScroll?: (position: number, offset: number) => void;
  initialIndex?: number;
}

class MyViewPager extends React.PureComponent<MyViewPagerProps> {
  static defaultProps = {
    lazy: true,
    swipeEnabled: true,
    initialIndex: 0,
    renderLazyPlaceholder: () => null,
    keyboardDismissMode: "on-drag",
  };

  viewPagerRef: React.RefObject<ViewPager>;
  sceneRefs: { [key: number]: any };
  visibleSceneIndexs: Array<number>;
  selectedIndex: number;

  constructor(props: MyViewPagerProps) {
    super(props);
    const { initialIndex = 0 } = props;
    this.viewPagerRef = React.createRef<ViewPager>();
    this.sceneRefs = {};
    this.visibleSceneIndexs = [initialIndex];
    this.selectedIndex = initialIndex;
  }

  componentWillUnmount() {
    this.sceneRefs = [];
    this.visibleSceneIndexs = [];
  }

  scrollToIndex(index: number) {
    if (index === this.selectedIndex) {
      return;
    }
    if (this.viewPagerRef.current) {
      const animated = Math.abs(index - this.selectedIndex) === 1;
      if (animated) {
        this.viewPagerRef.current.setPage(index);
      } else {
        this.viewPagerRef.current.setPageWithoutAnimation(index);
      }
    }

    this.selectedIndex = index;
    if (!this.visibleSceneIndexs.includes(index)) {
      this.sceneRefs[index] && this.sceneRefs[index].onVisibilityLoad();
    }
  }

  render() {
    const {
      style,
      routes,
      onIndexChange,
      renderScene,
      swipeEnabled,
      onPagerScroll,
      onSwipeStart,
      onSwipeEnd,
      initialIndex,
      lazy,
      sceneContainerStyle,
      renderLazyPlaceholder,
      keyboardDismissMode,
    } = this.props;
    return (
      <ViewPager
        ref={this.viewPagerRef}
        style={[styles.viewPager, StyleSheet.flatten(style)]}
        initialPage={initialIndex}
        keyboardDismissMode={keyboardDismissMode}
        scrollEnabled={swipeEnabled}
        onPageScroll={({ nativeEvent: { position, offset } }) => {
          // console.warn('onPageScroll');
          onPagerScroll && onPagerScroll(position, offset);
        }}
        onPageSelected={({ nativeEvent: { position } }) => {
          // console.warn('onPageSelected');
          this.selectedIndex = position;
          if (!this.visibleSceneIndexs.includes(position)) {
            this.sceneRefs[position] &&
              this.sceneRefs[position].onVisibilityLoad();
          }
          onIndexChange && onIndexChange(position, () => {});
        }}
        onPageScrollStateChanged={({ nativeEvent: { pageScrollState } }) => {
          // console.warn('onPageScrollStateChanged', pageScrollState);
          if (pageScrollState === "dragging") {
            onSwipeStart && onSwipeStart();
          }
          if (pageScrollState === "idle") {
            onSwipeEnd && onSwipeEnd();
          }
        }}
        orientation="horizontal"
        transitionStyle="scroll"
      >
        {routes.map((route, index) => {
          return (
            <Scene
              key={`Scene${index}`}
              getRef={(ref) => {
                this.sceneRefs[index] = ref;
              }}
              style={sceneContainerStyle}
              placeholder={renderLazyPlaceholder && renderLazyPlaceholder()}
              visible={!lazy || index === initialIndex}
            >
              {renderScene({
                route,
                index,
                jumpTo: (positon) => this.scrollToIndex(positon),
              })}
            </Scene>
          );
        })}
      </ViewPager>
    );
  }
}

export default MyViewPager;