import * as React from 'react'
import {
    Text,
    Button,
    View,
    StyleSheet,
    FlatList,
    ListRenderItemInfo,
    Image,
    TouchableOpacity,
    DeviceEventEmitter,
    EmitterSubscription,
} from 'react-native'
import {
    BirthdayAddName,
    BirthdayDetailName,
    BirthdayRefreshNotify,
    RootTabScreenProps,
} from '../../Common/define/Defines'
import BirthdayDataManager from '../data/BirthdayDataManager'
import BirthdayData from '../data/BirthdayData'
import BirthdayItem from './BirthdayItem'
import JSONTool from '../../Common/tool/JSONTool'

interface StateType {
    dataList: Array<BirthdayData | string>
}

export default class Birthday extends React.Component<RootTabScreenProps<'BirthdayName'>, StateType> {
    refreshNotify: EmitterSubscription | null = null
    constructor(props: any) {
        super(props)
        this.state = {
            dataList: [],
        }
        props.navigation.setOptions({
            headerRight: this._headerRight.bind(this),
        })
    }

    _headerRight = (): React.ReactNode => {
        return (
            <TouchableOpacity style={styles.naviAddBtn} onPress={this._onPressNaviRight.bind(this)}>
                <Image style={styles.naviAddImg} source={require('../../Common/img/add.png')} />
            </TouchableOpacity>
        )
    }

    _onPressNaviRight = () => {
        const navigation = this.props.navigation
        navigation.navigate(BirthdayAddName)
    }

    async componentDidMount() {
        const dataList = await BirthdayDataManager.getDataList()
        this.setState({
            dataList: dataList,
        })
        this._addListener()
    }

    componentWillUnmount(): void {
        this._removeListener()
        this.setState = () => {}
    }

    _addListener = () => {
        this.refreshNotify = DeviceEventEmitter.addListener(BirthdayRefreshNotify, this._refreshNotify.bind(this))
    }

    _removeListener = () => {
        this.refreshNotify && this.refreshNotify.remove()
        this.refreshNotify = null
    }

    _refreshNotify = async () => {
        const dataList = await BirthdayDataManager.getDataList()
        console.info('dataList: ' + JSONTool.prettyString(dataList))
        this.setState({
            dataList: dataList,
        })
    }

    render() {
        const navigation = this.props.navigation
        const dataList = this.state.dataList
        const showAddBtn = dataList.length <= 0
        return (
            <View style={styles.container}>
                {showAddBtn ? (
                    <Button title="点我添加生日" onPress={() => navigation.navigate(BirthdayAddName)} />
                ) : (
                    <FlatList style={styles.flatList} data={dataList} renderItem={this._renderItem.bind(this)} />
                )}
            </View>
        )
    }

    _renderItem = (info: ListRenderItemInfo<BirthdayData | string>): React.ReactElement<BirthdayData | string> => {
        const data = info.item
        if (data instanceof BirthdayData) {
            return <BirthdayItem data={data} onPressItem={this._onPressItem.bind(this)} />
        }
        return (
            <View style={styles.itemTitleView}>
                <Text style={styles.itemTitle}>{data}</Text>
            </View>
        )
    }

    _onPressItem = (data: BirthdayData) => {
        const navigation = this.props.navigation
        navigation.push(BirthdayDetailName, data)
        data.getFirstLetter()
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    naviAddBtn: {
        width: 50,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
    },
    naviAddImg: {
        width: 17,
        height: 17,
        resizeMode: 'contain',
    },
    flatList: {
        width: '100%',
        height: '100%',
    },
    itemTitleView: {
        height: 30,
        justifyContent: 'center',
    },
    itemTitle: {
        fontSize: 17,
        color: '#191919',
        marginLeft: 15,
    },
})