import React, { Component } from "react";
import { Animated, View, StyleSheet, PanResponder, Text, Modal, Image, TouchableOpacity } from "react-native";
import { height, px2dp, width } from "../../utils/base";

export interface Props {

}

export interface State {
    visable: boolean
    url: string | any
}

export default class DrawImagePreView extends Component {
    pan = new Animated.ValueXY();

    panResponder = PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderGrant: (event, gestureState) => {
            console.log("手势；", gestureState)
            // if(gestureState.x0<=width*2/3){
            //     this.maxX:width
            // }
            // width
            this.pan.setOffset({
                x: this.pan.x._value,
                y: this.pan.y._value
            });
        },
        onPanResponderMove: Animated.event([
            null,
            { dx: this.pan.x, dy: this.pan.y }
        ]),
        onPanResponderRelease: () => {
            this.pan.flattenOffset();
        }
    });

    public readonly state: Readonly<State> = {
        visable: false,
        url: "https://"
    }

    public maxX = 0
    public maxY = 0
    show = (item) => {
        this.setState({
            visable: true,
            url: item
        })
    }

    hide = () => {
        this.setState({
            visable: false
        })
    }

    render() {
        let { visable, url } = this.state;
        return (
            <>
                {
                    visable ? <View style={styles.container}>
                        <Text style={styles.titleText}>Drag this box!</Text>
                        <Animated.View
                            style={{
                                transform: [{ translateX: this.pan.x }, { translateY: this.pan.y }]
                                // transform: [{ translateX: (Number(this.pan.x) <= width / 3) ? this.pan.x : 0 }, { translateY: Number(this.pan.y) <= height / 4 ? this.pan.y : 0 }]
                            }}
                            {...this.panResponder.panHandlers}
                        >
                            {/* <TouchableOpacity onBlur={this.hide}> */}
                            <Image style={styles.box} source={{ uri: url }} />

                            {/* </TouchableOpacity> */}
                        </Animated.View>
                    </View> : null
                }
            </>



        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        position: "absolute",
        // padding: px2dp(100)
    },
    titleText: {
        fontSize: 14,
        lineHeight: 24,
        fontWeight: "bold"
    },
    box: {
        height: height / 2,
        width: width * 2 / 3,
        backgroundColor: "blue",
        borderRadius: 5
    }
});