import React, { useState, useEffect, useRef } from 'react'
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback, StyleProp, ViewStyle, ScrollView } from 'react-native';
import LazyRender from "../LazyRender"
import * as Animatable from 'react-native-animatable';
type Props = {
  show: boolean,
  onChange: (value: boolean) => void,
  style?: StyleProp<ViewStyle>,
  zIndex?: number | string,
  lazyRender?: boolean,
  children?: any,
  duration?: number
}
const Overlay = ({
  show,
  onChange,
  zIndex = 1,
  style,
  lazyRender = true,
  duration = 300,
  ...rest }: Props) => {
  const showChange = () => {
    onChange(!show)
    durationTime()
  }
  const [_none, set_none] = useState<'none' | 'flex'>("none")
  const durationTime = () => {
    if (show) {
      set_none("flex")
      const tt = setTimeout(() => {
        set_none("none")
        clearTimeout(tt)
      }, duration)
    }
  }
  return (
    <LazyRender lazyRender={lazyRender} duration={duration} show={show}>
      <TouchableWithoutFeedback onPress={showChange}>
        {/* @ts-ignore 忽略本行class组件的ts报错 */}
        <Animatable.View
          duration={duration}
          animation={show ? "fadeIn" : "fadeOut"}
          style={StyleSheet.flatten([{ display: show ? 'flex' : _none, zIndex: Number(zIndex) }, styles.overlay, style])}>
            <View style={[styles.overlay_content, { zIndex: Number(zIndex) + 10 }]}>
              {rest?.children}
            </View>
        </Animatable.View>
      </TouchableWithoutFeedback>
    </LazyRender>
  )
}


const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, .4)',
  },
  overlay_bg: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, .4)',
  },
  overlay_content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})
export default Overlay