import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, NativeAppEventEmitter, FlatList, RefreshControl, TouchableOpacity, DeviceEventEmitter } from 'react-native'
// import { SearchBar } from 'react-native-elements';
import { SwipeListView } from 'react-native-swipe-list-view';
import { px2dp, width, StorageUtil, statusBarHeight } from '../../utils/base';
import { RefreshNormalHeader } from 'react-native-smart-refresh'
import ChatItem from './CartItem';


export interface Props {

}

export interface State {
    listData?: Array<any>
    refreshing?: boolean
    search?: any

}

export default class CartList extends React.Component<Props, State> {
    constructor(props) {
        super(props);

    }

    componentDidMount() {
    }

    componentWillUnmount() {
        // this.scrollToEndListenner.remove()
        // this.timer().remove()
        console.log("注销了")
        // this.setState({ isLoad: false })
        this.timer && clearTimeout(this.timer)
    }
    public readonly state: Readonly<State> = {
        listData: [1, 2, 3, 4],
        refreshing: false,
        search: ""
    }

    public timer = null





    _renderItem = () => {
        return (
            <Text>ss</Text>
        )
    }

    onRefresh = () => {
        let { listData, refreshing } = this.state
        refreshing = true
        this.setState({ refreshing })
        setTimeout(() => {
            refreshing = false
            this.setState({ refreshing })
        }, 1000);
    }

    changeText = (text) => {
        this.setState({
            search: text
        })
    }




    _renderHiddenItem = (i, k) => {
        return (
            <View style={styles.hiddenStyle}>
                <View style={styles.itemLeft}>
                    <Image source={{ uri: "https://" }} style={styles.avaterStyle} />
                </View>
                {/* <View style={styles.itemLeft}>
                    <Image source={{ uri: "https://" }} style={styles.avaterStyle} />
                </View> */}
                <View style={styles.hiddenContainerStyle}>

                    <TouchableOpacity style={[styles.hiddenItemStyle, { backgroundColor: "#FFA500" }]}>
                        <Text>不再显示</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.hiddenItemStyle, { backgroundColor: "#FF6347" }]} onPress={() => this.deleteRow(i, k)}>
                        <Text>删除</Text>
                    </TouchableOpacity>

                </View>

            </View>


        )
    }

    closeRow = (rowMap, rowKey) => {
        if (rowMap[rowKey]) {
            rowMap[rowKey].closeRow();
        }
    };

    deleteRow = (rowMap, rowKey) => {
        let { listData } = this.state;
        this.closeRow(rowMap, rowKey);
        const newData = [...listData];
        const prevIndex = listData.findIndex(item => item.key === rowKey);
        newData.splice(prevIndex, 1);
        this.setState({
            listData: newData
        })
    };

    render() {
        let { listData, refreshing, search } = this.state
        console.log("data:", listData)
        return (
            <View style={styles.main}

            >

                <SwipeListView
                    // useFlatList
                    data={listData}
                    renderItem={(k, rowMap) => <ChatItem data={k} {...this.props} />}
                    renderHiddenItem={(data, rowMap) =>
                        this._renderHiddenItem(data, rowMap)
                    }
                    keyExtractor={(item, index) => `${index}`}
                    // // leftOpenValue={75}
                    rightOpenValue={-px2dp(160)}
                    ListHeaderComponent={() => <Text>sss</Text>}
                    refreshControl={
                        // <RefreshNormalHeader
                        //     refreshing={refreshing}
                        //     onRefresh={this.onRefresh}
                        //     containerStyle={{ marginBottom: 20, alignItems: 'flex-end' }}
                        //     titleStyle={{ fontSize: 14 }}
                        //     timeStyle={{ fontSize: 14 }}
                        //     leftContainerStyle={{ marginBottom: 8 }}
                        //     activityIndicatorProps={{ color: "red" }}
                        // />
                        <RefreshControl
                            refreshing={refreshing}
                            onRefresh={this.onRefresh}
                        />
                    }
                />
            </View>
        );

    }
}
const styles = StyleSheet.create({

    main: {
        flex: 1,
        // backgroundColor: '#fff',
        // backgroundColor: '#f0f0f0',
        backgroundColor: "#f6f6f6",
        // backgroundColor: "#fff"
        // marginTop: statusBarHeight + px2dp(10),

        // paddingTop: px2dp(20),
        // justifyContent: "center"

    },

    searchStyle: {
        width: width,
        height: px2dp(20)
    },

    hiddenStyle: {
        width: width,
        height: px2dp(130),
        flexDirection: "row",
        // justifyContent: "flex-end",
        // alignItems: "flex-start",
        justifyContent: "space-between"
        // justifyContent: "flex-end",
    },

    hiddenContainerStyle: {
        width: px2dp(160),
        height: "100%",
        flexDirection: "row",
        justifyContent: "flex-end",
        // backgroundColor: 'blue'

    },

    hiddenItemStyle: {
        width: px2dp(80),
        justifyContent: 'center',
        alignItems: "center",

        // height: "100%",

    },

    itemLeft: {
        width: px2dp(40),
        height: px2dp(60),
        justifyContent: "center",
        alignItems: 'center',
        // backgroundColor: "red"
        // borderRadius: px2dp(20),
        // backgroundColor: "#f0f0f0"
    },

    avaterStyle: {
        width: px2dp(40),
        height: px2dp(40),
        borderRadius: px2dp(20),
        backgroundColor: "#f0f0f0"
    },

})