interface Props<ItemT, Variables>
  extends Omit<
    FlatListProps<ItemT>,
    | 'data'
    | 'pagingEnabled'
    | 'bounces'
    | 'showsVerticalScrollIndicator'
    | 'scrollsToTop'
    | 'onLayout'
    | 'onScroll'
  > {
  query: (
    variables: {
      afterIndex?: number;
      length?: number;
    } & Variables,
  ) => Promise<{data: Array<ItemT>; remain: number}>;
  variables?: Variables;
  onPageIndexChanged?: (index: number) => void;
}

const DEFAULT_UNMOUNT_LENGTH_AWAY = 5;
export function PagingList<T extends {id: number}>(
  props: Props<T, {length?: number}>,
) {
  const [viewHeight, setViewHeight] = React.useState(0);
  const [currentPageIndex, setCurrentPageIndex] = React.useState(0);

  return (
    <FlatList
      {...props} // props should not be customized should be put under this line.
      pagingEnabled // 实现分页滚动
      bounces={false}
      showsVerticalScrollIndicator={false}
      scrollsToTop={false}
      renderItem={(item) => {
        const shouldMount =
          Math.abs(item.index - currentPageIndex) < DEFAULT_UNMOUNT_LENGTH_AWAY;
        // 每个子项包含在一个高度为列表高度的View中
        // 如果当前页面是20，那么16页之前的页面不再渲染，24页之后的页面不再渲染
        // 不再渲染的组件替换成null
        return (
          <View style={{height: viewHeight}}>
            {shouldMount && renderItem ? renderItem(item) : null}
          </View>
        );
      }}
      onLayout={(e) => {
        const {height} = e.nativeEvent.layout;
        setViewHeight(height);
      }}
      onScroll={(event) => {
        const offsetY = event.nativeEvent.contentOffset.y;
        if (viewHeight > 0) {
          const pageIndex = Math.ceil(offsetY / viewHeight);
          if (pageIndex !== currentPageIndex) {
            setCurrentPageIndex(pageIndex);
          }
        }
      }}
    />
  );
}

const DEFAULT_PRE_FETCH_INDEX = 3; // if there is only 3 item left, then fetch more data
export function PagingList<T extends {id: number}>(
  props: Props<T, {length?: number}>,
) {
  const [data, setData] = React.useState<T[]>([]);
  const [remain, setRemain] = React.useState(0);
  const [loading, setLoading] = React.useState(false);

  const fetchData = async () => {
    try {
      if (loading) {
        return;
      }
      setLoading(true);
      const ret = await query({
        afterIndex: data.length > 0 ? data[0].id : -1,
        length,
      });
      setData(data.concat(ret.data));
      setRemain(ret.remain);
    } catch (error) {
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => {
    // 第一次加载组件获取数据
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query, variables]);

  const onPageChanged = (index: number) => {
    setCurrentPageIndex(index);
    if (
      remain > 0 &&
      data.length - currentPageIndex - 1 < DEFAULT_PRE_FETCH_INDEX
    ) {
      // 翻到倒数第3页，获取更多数据
      fetchData();
    }
    // 对外抛出翻页事件
    onPageIndexChanged && onPageIndexChanged(index);
  };

  return (
    <FlatList
      keyExtractor={(item) => `${item.id}`}
      initialNumToRender={20}
      {...props} // props should not be customized should be put under this line.
      onScroll={(event) => {
        const offsetY = event.nativeEvent.contentOffset.y;
        if (viewHeight > 0) {
          const pageIndex = Math.ceil(offsetY / viewHeight);
          if (pageIndex !== currentPageIndex) {
            onPageChanged(pageIndex);
          }
        }
      }}
    />
  );
}

const AppStack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <PaperProvider>
        <AppStack.Navigator mode="modal">
          <AppStack.Screen
            name="Main"
            component={RootViews} // RootViews是一个Bottom Tabs
            options={{headerShown: false}}
          />
          <AppStack.Screen
            name="Comment"
            component={CommentStream} // CommentStream单独的一个评论路由栈
            options={{
              headerShown: false,
              cardStyle: {backgroundColor: 'transparent'},
            }}
          />
        </AppStack.Navigator>
      </PaperProvider>
    </NavigationContainer>
  );
};

export const CommentStream: React.FC<CommentStreamProps> = (props) => {
  const navigation = useNavigation();
  const {videoId} = props.route.params;
  // 由于没有使用Redux/MobX状态管理机制，所以使用fetchTime处理兄弟组件间的状态传递。这里发布评论需要强制更新评论列表
  const [fetchTime, setFetchTime] = React.useState(Date.now());
  const [commentCount, setCommentCount] = React.useState<number>();
  const onPosted = React.useCallback(() => {
    setFetchTime(Date.now());
  }, []);

  return (
    // 这里KeyboardAvoidingView是解决键盘遮挡的问题，一定要放在整个屏幕视图最外层才能正确padding
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <TouchableWithoutFeedback onPress={navigation.goBack}>
        <View style={styles.shadowPanel} />
      </TouchableWithoutFeedback>
      <View style={styles.commentPanel}>
        <CommentHeader
          title={
            commentCount === undefined ? 'comments' : `${commentCount} comments`
          }
        />
        <CommentList
          videoId={videoId}
          fetchTime={fetchTime}
          onFetched={setCommentCount}
        />
        <CommentPost videoId={videoId} onPosted={onPosted} />
      </View>
    </KeyboardAvoidingView>
  );
};

export const CommentPost: React.FC<CommentPostProps> = (props) => {
  const {videoId, onPosted} = props;
  const [text, setText] = React.useState('');

  return (
    // 这个组件已经是屏幕最底下的视图了，使用SafeAreaView来确保全面屏手机能正常使用
    <TouchableWithoutFeedback>
      <SafeAreaView style={styles.container}>
        <TextInput
          value={text}
          onChangeText={setText}
          style={styles.text}
          placeholder={INITIAL_TEXT}
          placeholderTextColor={Colors.grey100}
          onFocus={() => setText('')}
          onBlur={() => setText(INITIAL_TEXT)}
        />
        <IconButton
          icon="arrow-left-bold-circle"
          size={32}
          color={Colors.blue500}
          onPress={async () => {
            if (text) {
              await postComment(videoId, text);
              Keyboard.dismiss();
              onPosted();
            }
          }}
        />
      </SafeAreaView>
    </TouchableWithoutFeedback>
  );
};

export const VideoTab: React.FC<VideoTabProps> = () => {
  const navigation = useNavigation();

  const [paused, setPaused] = React.useState(false); // paused和当前播放的Video组件同步
  const [pageIndex, setPageIndex] = React.useState(0); // pageIndex当前页

  React.useEffect(() => {
    const unsubscribeForBlur = navigation.addListener('blur', () => {
      setPaused(true); // 底栏tab切换之后，需要暂停视频
    });
    return unsubscribeForBlur;
  }, [navigation]);

  return (
    <PagingList
      query={fetchVideoStream}
      renderItem={({item, index}) => {
        return (
          <VideoSocials
            data={item}
            paused={paused || pageIndex !== index} // 非当前页的视频暂停
            onPausedChanged={setPaused}
          />
        );
      }}
      onPageIndexChanged={(index) => {
        setPageIndex(index);
        setPaused(false);
      }}
    />
  );
};

const onSingleTapped = (event: TapGestureHandlerStateChangeEvent) => {
  if (event.nativeEvent.state === State.ACTIVE) {
    const nextState = !paused;
    setPaused(nextState);
    onPausedChanged && onPausedChanged(nextState);
  }
};

const onDoubleTapped = (event: TapGestureHandlerStateChangeEvent) => {
  if (event.nativeEvent.state === State.ACTIVE) {
    onDoubleTap &&
      onDoubleTap({x: event.nativeEvent.x, y: event.nativeEvent.y});
  }
};

<TapGestureHandler
  waitFor={doubleTap}
  onHandlerStateChange={onSingleTapped}>
  <TapGestureHandler
    ref={doubleTap}
    onHandlerStateChange={onDoubleTapped}
    numberOfTaps={2}>
    <View style={styles.backgroundVideo}>
      <RNVideo repeat paused={paused} source={{uri}} style={styles.video} />
    </View>
  </TapGestureHandler>
</TapGestureHandler>

/**
 * @param params.init 初值
 * @param params.dest 目标值
 * @param params.duration 动画时间
 * @param params.clock 控制器
 * @param params.onFinished 动画结束的回调
 */
export const runNumberTiming = (params: {
  init: number;
  dest: number;
  duration?: number;
  clock?: Animated.Clock;
  onFinished?: () => void;
}) => {
  const {
    init,
    dest,
    duration = 2000,
    clock = new Clock(),
    onFinished = () => {},
  } = params;
  const state = {
    finished: new Value(0),
    position: new Value(init),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration,
    toValue: new Value(dest),
    easing: Easing.inOut(Easing.ease),
  };

  // 下面这些方法在动画的每一帧都将重新计算
  return block([
    cond(
      clockRunning(clock),
      [
        // 如果动画正在进行，且有新的目标值，则更新目标值
        set(config.toValue, dest),
      ],
      [
        // 启动控制器
        startClock(clock),
      ],
    ),
    // 动画值的更新方式
    timing(clock, state, config),
    // 动画结束，关闭控制器，调用callback
    cond(state.finished, [stopClock(clock), call([], onFinished)]),
    // 返回动画值
    state.position,
  ]);
};

export const HeartAnimation = React.memo((props: HeartAnimationProps) => {
  const {offsetX, offsetY} = props;
  const [finished, setFinished] = React.useState(false);

  // 为了节省空间，动画结束后，移除视图
  if (finished) {
    return null;
  }

  // 使用同一个动画控制器，动画opacity和scale属性
  const clock = new Clock();
  const opacity = runNumberTiming({
    clock,
    init: 1,
    dest: 0,
    onFinished: () => {
      setFinished(true);
    },
  });
  const scale = runNumberTiming({clock, init: 0, dest: 2});
  return (
    <Animated.View
      style={{
        position: 'absolute',
        top: offsetY - HEART_ICON_SIZE / 2,
        left: offsetX - HEART_ICON_SIZE / 2,
        opacity,
        transform: [{scale}],
      }}>
      <Heart />
    </Animated.View>
  );
});

export const VideoSocials: React.FC<VideoSocialsProps> = (props) => {
  const [points, setPoints] = React.useState<iPointStamp[]>([]);
  const {data, paused, onPausedChanged} = props;

  const onVideoDoubleTap = React.useCallback((point: iPoint) => {
    setPoints((pre) =>
      pre.concat(Object.assign({timestamp: Date.now()}, point)),
    ); // 将坐标存入数组
  }, []);

  return (
    <View style={styles.container}>
      <Video
        uri={data.uri}
        paused={paused}
        onPausedChanged={onPausedChanged}
        onDoubleTap={onVideoDoubleTap}
      />
      <Comment videoId={data.id} comment={data.comment} style={styles.social} />
      {/* 坐标数组传到朦板中 */}
      <HeartAnimationFullView style={styles.heart} points={points} />
    </View>
  );
};

export const HeartAnimationFullView = React.memo(
  (props: HeartAnimationFullViewProps) => {
    const {points, style} = props;

    // 朦板的pointerEvents别忘记设置
    return (
      <View style={style} pointerEvents="none">
        {points.map((item) => (
          <HeartAnimation
            key={item.timestamp}
            offsetX={item.x}
            offsetY={item.y}
          />
        ))}
      </View>
    );
  },
);