import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, Modal, Animated, TouchableOpacity } from 'react-native'
import { px2dp, toast, width } from '../../utils/base';
export interface Props {
    // index: number
}

export interface State {
    visalbe: boolean
    sacle: Animated.Value
    opacity: Animated.Value
}

export default class ImageModal extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        visalbe: false,
        sacle: new Animated.Value(1),
        opacity: new Animated.Value(1)
    }

    public index = 0

    show = (index) => {
        this.setState({ visalbe: true, })
        this.index = index
        Animated.sequence([
            Animated.spring(this.state.sacle, {
                toValue: 3,
                velocity: 10,//初始速度
                friction: 2,//摩擦力值
                tension: 5,//弹跳的速度值
                useNativeDriver: true
            }),

            Animated.spring(this.state.sacle, {
                toValue: 0,
                velocity: 2,//初始速度
                friction: 4,//摩擦力值
                tension: 5,//弹跳的速度值
                useNativeDriver: true
            })

        ]).start(({ finished }) => { this.hide() })
        //   Animated.spring(this.state.sacle, {
        //     toValue: 0,
        //     velocity: 2,//初始速度
        //     friction: 4,//摩擦力值
        //     tension: 5,//弹跳的速度值
        //     useNativeDriver: true
        // })

    }

    hide = () => {
        // this.animatedHandler && this.animatedHandler.stop()
        this.state.sacle.stopAnimation()
        this.setState({ visalbe: false })
        // Animated.timing(this.state.sacle, {
        //     toValue: 0,
        //     duration: 100,
        //     useNativeDriver: true
        // }).start(() => { this.setState({ visalbe: false }) })

    }

    render() {
        let { visalbe } = this.state;
        // let { index } = this.props;
        return (
            <Modal
                visible={visalbe}
                transparent={true}
            >
                <TouchableOpacity style={styles.main} onPress={this.hide}>
                    <Animated.Image
                        // onLoadStart={this.loadingStart}
                        // onLoadEnd={this.loadingEnd}
                        // onError={require('../../assets/9.jpg')}r
                        style={[styles.imageStyle, { marginEnd: this.index == 2 || this.index == 5 ? 0 : px2dp(10), transform: [{ scale: this.state.sacle },], opacity: this.state.opacity }]}
                        source={{ uri: "https://images.pexels.com/photos/6974009/pexels-photo-6974009.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" }} />
                </TouchableOpacity>

            </Modal>
        );

    }
}
const styles = StyleSheet.create({
    main: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        // position: "absolute"
    },
    imageStyle: {
        position: "absolute",
        width: (width - 97) / 3,
        height: (width) / 3,
        marginBottom: px2dp(10),
        backgroundColor: "#fff",
        alignItems: 'center',
        justifyContent: "center",

    },
})