import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  ActivityIndicator,
  TextInput,
  TouchableOpacity,
  ImageBackground,
  Dimensions,
  Image,
  PixelRatio,
  PanResponder,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'

const { height, width } = Dimensions.get('window')

class testaaa extends Component {
  constructor(props) {
    super(props)
    this.state = {
      gameDivs: [],
      nextDivs: [],
    }
    this.TouchX = 0
    this.TouchY = 0
    this.downI = 0
    this.flag = true
    // 手势---------------------------------------

    this._panResponder = PanResponder.create({
      // 要求成为响应者：
      onStartShouldSetPanResponder: (evt: Object, gestureState: Object) => true,
      onStartShouldSetPanResponderCapture: (
        evt: Object,
        gestureState: Object
      ) => true,
      onMoveShouldSetPanResponder: (evt: Object, gestureState: Object) => true,
      onMoveShouldSetPanResponderCapture: (evt: Object, gestureState: Object) =>
        true,

      onPanResponderGrant: (evt: Object, gestureState: Object) => {
        // let moveY = Math.floor((evt.nativeEvent.pageX - 60) / 20);
        // if (moveY >= 7) {
        //   moveY = 7;
        // } else if (moveY <= 0) {
        //   moveY = -1;
        // }
        // this.TouchY = moveY;
        // this.init();
        // console.log(evt, "onPanResponderGrant  ---11111111111111");
        // console.log(gestureState, "onPanResponderGrant ---2222222222");
        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
        // gestureState.{x,y} 现在会被设置为0
      },
      onPanResponderMove: (evt: Object, gestureState: Object) => {
        let moveY = Math.floor((gestureState.moveX - 50) / 20)
        if (moveY >= 6) {
          moveY = 6
        } else if (moveY <= 0) {
          moveY = 0
        }
        this.TouchX = moveY
        this.init()
        // 最近一次的移动距离为gestureState.move{X,Y}
        // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt: Object, gestureState: Object) =>
        true,
      onPanResponderRelease: (evt: Object, gestureState: Object) => {
        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
        // 一般来说这意味着一个手势操作已经成功完成。
      },
      onPanResponderTerminate: (evt: Object, gestureState: Object) => {
        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
      },
      onShouldBlockNativeResponder: (evt: Object, gestureState: Object) => {
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        return true
      },
    })

    // 手势---------------------------------------
  }
  componentDidMount() {
    SplashScreen.hide()
    this.setIntervalFn(true)

    this.init()
  }

  // 定时器
  setIntervalFn(isOpen) {
    if (isOpen) {
      // flag 避免重复点击
      if (this.flag) {
        this.flag = false
        this.settime = setInterval(() => {
          this.downOpera()
        }, 100)
      }
    } else {
      this.flag = true
      clearInterval(this.settime)
    }
  }

  init() {
    const nextDatas = [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
      gameDatas = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [2, 0, 0, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 0, 2, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 2, 2, 2, 0, 2, 2],
        [2, 2, 2, 0, 2, 2, 2, 2, 2, 2],
        [2, 2, 2, 2, 0, 2, 2, 2, 2, 2],
        [0, 2, 2, 2, 2, 2, 2, 2, 2, 2],
      ]

    for (let i = 0; i < nextDatas.length; i++) {
      for (let j = 0; j < nextDatas[0].length; j++) {
        if (nextDatas[i][j] != 0) {
          gameDatas[this.TouchY + i][this.TouchX + j] = nextDatas[i][j]
        }
      }
    }

    this.setGame(gameDatas, nextDatas)
  }

  downOpera() {
    this.TouchY = this.downI++
    if (this.TouchY >= 16) {
      this.TouchY = 16
      this.downI = 0
      this.setIntervalFn()
    }
    this.init()
  }

  setGame(gameDatas, nextDatas) {
    if (
      gameDatas &&
      gameDatas.length > 0 &&
      nextDatas &&
      nextDatas.length > 0
    ) {
      this.setState({
        gameDivs: this.squareFn(gameDatas, true),
        nextDivs: this.squareFn(nextDatas),
      })
    } else if (gameDatas && gameDatas.length > 0) {
      this.setState({
        gameDivs: this.squareFn(gameDatas, true),
      })
    } else if (nextDatas && nextDatas.length > 0) {
      this.setState({
        nextDivs: this.squareFn(nextDatas),
      })
    }
  }

  squareFn(value: Array) {
    if (!value) return
    const gameDivs = []
    for (let i = 0; i < value.length; i++) {
      let gameDiv = []
      for (let j = 0; j < value[0].length; j++) {
        let smallClass = ''
        if (value[i][j] == 1) {
          smallClass = 'current'
        } else if (value[i][j] == 2) {
          smallClass = 'done'
        }
        const newNode = (
          <View
            key={`${i}:${j}`}
            style={[
              styles.small,
              styles[smallClass],
              {
                top: i * 20,
                left: j * 20,
              },
            ]}
          />
        )

        if (value[i][j] != 0) {
          gameDiv.push(newNode)
        }
      }
      gameDivs.push(gameDiv)
    }
    return gameDivs
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <View
            {...this._panResponder.panHandlers}
            style={{
              width: 202,
              height: 401,
              borderColor: 'black',
              borderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              position: 'absolute',
              backgroundColor: '#F2FAFF',
            }}
          >
            {this.state.gameDivs}
          </View>
          <View style={{ position: 'absolute', left: 250 }}>
            <View
              style={{
                width: 82,
                height: 82,
                borderWidth: 1,
                borderColor: 'black',
                backgroundColor: '#F2FAFF',
              }}
            >
              {this.state.nextDivs}
            </View>
            <Text>已用时：0s</Text>
            <Text>已得分：0分</Text>
            <TouchableOpacity
              onPress={() => {
                this.setIntervalFn()
              }}
            >
              <Text>停止</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.setIntervalFn(true)
              }}
            >
              <Text>开始</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'absolute',
    flexDirection: 'row',
    paddingTop: 20,
    paddingLeft: 20,
    top: 150,
    left: 20,
  },
  small: {
    width: 20,
    height: 20,
    position: 'absolute',
  },

  current: {
    backgroundColor: 'pink',
    borderColor: 'red',
    borderWidth: 1,
  },
  done: {
    backgroundColor: 'gray',
    borderColor: 'black',
    borderWidth: 1,
  },
})

export default testaaa