import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, ScrollView, TouchableOpacity, ViewStyle, StyleProp } from 'react-native'
import { colors, height, isEmpty, px2dp, width } from '../../utils/base';
import ActionSheet from '../ActionSheet/ActionSheet';
import ImageItem from './ImageItem';
import ImagePikcker from './ImagePicker';
export interface Props {
    imageCount?: number
    style?: StyleProp<ViewStyle> | undefined;
    dataReturn?: Function
    showAction?: Function
    deleteImg?: Function
}

export interface State {
    imageList: Array<any>
}

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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        imageList: [],
    }



    onPressImage = async () => {
        let { imageList } = this.state;
        let { imageCount } = this.props;
        ImagePikcker.chooseImage(imageCount ? imageCount - imageList.length : 6 - imageList.length, true).then(res => {
            // console.log("数据:", res)
            imageList = imageList.concat(res)
            if (isEmpty(res)) {
                imageList = []
            }
            this.setState({
                imageList
            })
            this.dataReturn(res)
        })

    }


    openCaraimer = async () => {
        let { imageList } = this.state;
        let { imageCount } = this.props;
        ImagePikcker.openCaraimer().then(res => {
            // console.log("数据:", res)
            imageList = imageList.concat(res)
            if (isEmpty(res)) {
                imageList = []
            }
            this.setState({
                imageList
            })
            this.dataReturn(res)
        })

    }

    onPressVideo = () => {
        let { imageList } = this.state;
        ImagePikcker.onPressVideo((res) => {
            imageList = imageList.concat(res)

            if (isEmpty(imageList)) {
                imageList = []
            }
            this.setState({
                imageList
            })
            this.dataReturn(imageList)

        })
    }

    onCreateVideo = () => {
        let { imageList } = this.state;
        let { imageCount } = this.props;
        ImagePikcker.onCreateVideo((res) => {
            imageList = imageList.concat(res)

            if (isEmpty(imageList)) {
                imageList = []
            }
            this.setState({
                imageList
            })
            this.dataReturn(imageList)

        })

    }

    ImageResize = (uri) => {
        // ImagePikcker.ImageResize(uri)
    }

    deleteImg = (index) => {
        console.log(index)
        let { deleteImg } = this.props;
        let { imageList } = this.state;
        imageList.splice(index, 1)
        this.setState({ imageList })
        deleteImg && deleteImg(index)
        // this.dataReturn(imageList)
    }

    dataReturn = (imageList) => {
        let { dataReturn } = this.props;
        // imageList.array.forEach(element => imageList.key=);
        if (imageList && imageList.length > 0) {
            for (var i in imageList) {
                imageList[i].key = Number(i)
            }
        }
        dataReturn && dataReturn(imageList)
        // console.log("数据源:", imageList)
    }

    showAction = () => {
        let { showAction } = this.props;
        showAction && showAction()
    }

    render() {
        let { imageList } = this.state;
        let { imageCount } = this.props;
        imageCount = imageCount ? imageCount : 6
        return (
            <View style={styles.main}>
                <View style={styles.main}>
                    <ScrollView contentContainerStyle={[styles.imagePickerArea, { flexWrap: 'wrap' }]} >
                        {imageList && (imageList.length < 1) &&
                            <TouchableOpacity
                                style={styles.imagePcikerBox}
                                onPress={this.showAction} >
                                <Image
                                    source={require('../../assets/addVideo-Img-Icon.png')}
                                    style={[styles.videoPlayOverlay, { borderWidth: 0, zIndex: 0 }]} />
                            </TouchableOpacity>
                        }
                        {
                            imageList && imageList.map((ele, index) => <ImageItem src={ele.uri} index={index} deleteImg={this.deleteImg} key={index} />)
                        }
                        {imageList && imageList.length > 0 && imageList.length < imageCount ?
                            <TouchableOpacity
                                onPress={this.onPressImage}

                                style={styles.imagePcikerBox}>
                                <Image
                                    style={{ width: px2dp(42), height: px2dp(42), tintColor: '#d9d9d9' }}
                                    source={require('../../assets/add-line-icon.png')} />
                            </TouchableOpacity> : null
                        }
                    </ScrollView></View>


            </View>
        );

    }
}
const styles = StyleSheet.create({
    main: {
        flex: 1,
        // height: height
    },
    imagePickerArea: {
        width: width - px2dp(25),
        alignSelf: "center",
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        marginLeft: 0,
        marginTop: px2dp(20),
    },

    imagePcikerBox: {
        // position: 'relative',
        width: px2dp(113),
        height: px2dp(113),
        marginTop: px2dp(1),
        // borderWidth: onePx,
        // borderColor: 'rgb(227,228,229)',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: colors.bgColor,
        overflow: "hidden"
        // borderRadius: px2dp(4),
        // marginVertical: px2dp(10),
    },
    videoPlayOverlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: px2dp(118),
        height: px2dp(118),
        justifyContent: 'center',
        alignItems: 'center',
        // borderRadius: px2dp(4),
        zIndex: 99
    },

    videoIcon: {
        width: px2dp(24),
        height: px2dp(24),
        tintColor: '#fff'
    },

})