import React, { useRef, useState } from "react";
import { FlatList, ScrollView, TouchableOpacity, View, Text } from "react-native";
import { color } from "./color";
import configs from "./configs";
const CONTAINER = {
  flex: 1
};
/**
 * Describe your component here
 */
export const ScrollInto = function ScrollInto(props) {
  const {
    style,
    dataLengthView,
    dataHeader,
    children
  } = props;
  const styles = Object.assign({}, CONTAINER, style);
  const ref = useRef(null);
  const refHead = useRef(null);
  const [indexCurrent, setIndexCurrent] = useState(0);

  //scroll đến vị trí của title
  const scrollToIndex = indexCurrent => {
    setIndexCurrent(indexCurrent);
    refHead.current.scrollToIndex({
      animated: true,
      index: indexCurrent,
      viewPosition: 0.5
    });
  };
  const getItemLayout = (data, index) => {
    if (data) {}
    return {
      length: configs.windowWidth / 3.5 - 20,
      offset: configs.windowWidth / 3.5 * index,
      index
    };
  };

  // xử lý scroll đến từng vị trí
  const scrollHandler = index => {
    if (dataLengthView.length >= index) {
      ref.current.scrollTo({
        x: 0,
        y: dataLengthView[index - 1],
        animated: true
      });
    }
  };

  // xử lý scroll
  const handleScroll = event => {
    // console.log("event", event.nativeEvent.contentOffset.y)
    //tìm vị trí trùng
    const dtIndex = dataLengthView.findIndex(e => e <= event.nativeEvent.contentOffset.y);
    // console.log("data index ", dtIndex)
    // nếu vị trí bằng 0 thì thực hiện câu điều kiện if để scroll theo từng title, còn không bằngg thì
    if (dtIndex == 0) {
      for (let i = 0; i < dataLengthView.length; i++) {
        if (dataLengthView[i] <= event.nativeEvent.contentOffset.y + 20) {
          scrollToIndex(i);
        }
      }
    }
    //console.log("indesx", indexCurrent)
  };

  //console.log("indexcurrent", indexCurrent)

  return /*#__PURE__*/React.createElement(View, {
    style: styles
  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(FlatList, {
    ref: refHead,
    data: dataHeader,
    keyExtractor: (_, index) => `${index}`,
    horizontal: true
    // lâý ra kích thước của  item
    ,
    getItemLayout: getItemLayout,
    showsHorizontalScrollIndicator: false,
    renderItem: _ref => {
      let {
        item,
        index
      } = _ref;
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: indexCurrent != index ? BTN_TYPE : [BTN_TYPE, {
          borderBottomWidth: 1,
          borderColor: color.mainColor
        }],
        onPress: () => {
          scrollToIndex(index);
          scrollHandler(index + 1);
        }
      }, /*#__PURE__*/React.createElement(Text, {
        style: indexCurrent == index && {
          color: color.mainColor
        }
      }, item.tile));
    }
  })), /*#__PURE__*/React.createElement(ScrollView, {
    ref: ref
    // scroll
    ,
    onScroll: handleScroll,
    decelerationRate: 0.2,
    scrollEventThrottle: 16
  }, children, /*#__PURE__*/React.createElement(View, {
    style: {
      height: 100
    }
  })));
};
const BTN_TYPE = {
  marginHorizontal: 16,
  paddingVertical: 10
};
//# sourceMappingURL=scrollInto.js.map