import React, { useRef, useState, useEffect } from 'react';
import {Text, View, ScrollView, Dimensions, TouchableOpacity} from 'react-native';

const windowWidth = Dimensions.get('window').width;

let sentences = [["Groundwater is the word used to describe water that saturates the ground, filling all the available spaces.", "By far the most abundant type of groundwater is meteoric water; this is the groundwater that circulates as part of the water cycle. Ordinary meteoric water is water that has soaked into the ground from the surface, from precipitation (rain and snow) and from lakes and streams.", "There it remains, sometimes for long periods, before emerging at the surface again. ","At first thought it seems incredible that there can be enough space in the \"solid\" ground underfoot to hold all this water."], ["The necessary space is there, however, in many forms.", "The commonest spaces are those among the particles-sand grains and tiny pebbles-of loose, unconsolidated sand and gravel. Beds of this material, out of sight beneath the soil, are common.", "They are found wherever fast rivers carrying loads of coarse sediment once flowed.", "For example, as the great ice sheets that covered North America during the last ice age steadily melted away, huge volumes of water flowed from them."]];

export default function App() {
  const left = 12;
  const right=16;
  const textWidth = windowWidth - left-right;
  const [pageDatas, setPageDatas] = useState([]);
  const [isLoadData, setIsLoadData] = useState(true);
  const datasRef = useRef(([].concat(sentences)).map(i=>i.map(a=>a.split(" "))));
  useEffect(() => {
    const dealWords = ([].concat(sentences)).map(i=>i.map(a=>a.split(" ")));
    setTimeout(() => {
      var datas = [];
      datasRef.current.map((sections, a) => {
        var dataSections = [];
        var leading = 0;
        sections.map((items, b)=>{
          var dataItems = [];
          var text = "";
          items.map((i, index) => {
            if (i + leading > textWidth) {
              dataItems.push(text);
              leading = i;
              text = " "+dealWords[a][b][index];
            } else {
              text += (" "+dealWords[a][b][index]);
              leading += i;
            }
            if (index == items.length - 1) {
              dataItems.push(text);
            } 
          });
          dataSections.push(dataItems);
        });
        datas.push(dataSections);
      })
      setPageDatas(datas);
    }, 1000);  
  }, []);

  useEffect(() => {
    if (pageDatas.length > 0) {
      setIsLoadData(false);
    }
  }, [pageDatas]);

  if (isLoadData) {
    return sentences.map((item, i) => <View>
          {
            item.map((texts, index) => texts.split(" ").map((text, b) => <MeasureTextExample 
            text={" "+ text} fontSize={16} callBack={(w)=>{
              datasRef.current[i][index][b] = w
          }}/>))})
        </View>)
       
  }
  return (
    <View
      style={{
        flex: 1,
      }}>
      <ScrollView style={{width: windowWidth, paddingLeft: left, paddingRight: right}}>
      <View style={{}}>
        {pageDatas.map((item, i) => <View style={{}}>
          <View style={{height: 20}} key={i}/>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            {item.map((texts, index) => texts.map((text, b) =>
              <TouchableOpacity>
                <Text 
                  key={'a'+index}
                  style={{lineHeight: 26, color: '#333', fontWeight: index == 2 ? 700: 400, fontSize: index == 2 ? 15: 16}}>
                {text}</Text>
              </TouchableOpacity>))}
          </View>
        </View>)}
       
      </View>
      </ScrollView>
    </View>
  );
}



function MeasureTextExample({text, fontSize=14, fontWeight=400, callBack}) {
  const onTextLayout = event => {
    callBack(event.nativeEvent.layout.width);
  };

  return (
    <View>
      <Text
        onLayout={onTextLayout}
        style={{ position: 'absolute', opacity: 0, fontSize, fontWeight }}
      >
        {text}
      </Text>
    </View>
  );
}