import * as React from 'react'
import {View, Text, StyleSheet, TouchableOpacity, Image, ScrollView} from 'react-native'
import {BirthdayEditName, RootStackScreenProps} from '../../Common/define/Defines'
import BirthdayData from '../data/BirthdayData'
import {isObject} from '../../Common/tool/TypeTool'
import DateHelper from '../../Common/date/DateHelper'
import LunarSolarHelper from '../../Common/Solar&Lunar/LunarSolarHelper'
import EightWordsHelper from '../../Common/Solar&Lunar/EightWordsHelper'

export default class BirthdayDetail extends React.Component<RootStackScreenProps<'BirthdayDetailName'>> {
    constructor(props: any) {
        super(props)
        const navigation = this.props.navigation
        navigation.setOptions({
            title: '生日信息',
            headerLeft: this._headerLeft.bind(this),
            headerRight: this._headerRight.bind(this),
        })
    }

    _headerLeft = () => {
        return (
            <TouchableOpacity style={styles.naviBackBtn} onPress={this._onPressNaviBackBtn.bind(this)}>
                <Image style={styles.naviBackBtnImg} source={require('../../Common/img/back_white_icon.png')} />
            </TouchableOpacity>
        )
    }

    _onPressNaviBackBtn = () => {
        const navigation = this.props.navigation
        navigation.pop(1)
    }

    _headerRight = () => {
        return (
            <TouchableOpacity style={styles.editBtn} onPress={this._onPressEdit.bind(this)}>
                <Text style={styles.editBtnTitle}>{'编辑'}</Text>
            </TouchableOpacity>
        )
    }

    _onPressEdit = async () => {
        const navigation = this.props.navigation
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return
        }
        navigation.push(BirthdayEditName, data!)
    }

    render() {
        return (
            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContentView}>
                {this._renderHeader()}
                {this._renderAge()}
                {this._renderBirthday()}
                {this._renderTime()}
                {this._renderAnimal()}
                {this._renderConstellation()}
                {this._renderBirthdayYearHeader()}
                {this._renderBirthdayYearDate()}
                {this._renderBirthdayYearWeek()}
                {this._renderThisYearHeader()}
                {this._renderThisYearDate()}
                {this._renderThisYearWeek()}
                {this._renderNextYearHeader()}
                {this._renderNextYearDate()}
                {this._renderNextYearWeek()}
                {this._renderMoreInfoHeader()}
                {this._renderMoreInfo()}
            </ScrollView>
        )
    }

    _renderHeader = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const isLunar = data!.isLunar
        const tagTitle = isLunar ? '农历' : '公历'
        const tagBgColorStyle = {backgroundColor: isLunar ? '#51C4F3' : '#FA883D'}
        const name = data!.getShowName()
        return (
            <View style={styles.header}>
                <Text style={styles.name}>{name}</Text>
                <View style={[styles.tagView, tagBgColorStyle]}>
                    <Text style={styles.tagTitle}>{tagTitle}</Text>
                </View>
            </View>
        )
    }

    _renderAge = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        return this._renderItem('年龄', '虚岁' + data!.getAge())
    }

    _renderBirthday = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        return this._renderItem('生日', data!.getBirthdayInfo())
    }

    _renderTime = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        return this._renderItem('时间', data!.getShowHour())
    }

    _renderAnimal = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        return this._renderItem('生肖', data!.getAnimal())
    }

    _renderConstellation = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        return this._renderItem('星座', data!.getConstellation())
    }

    _renderItem = (leftText: string, rightText: string) => {
        return (
            <View style={styles.item}>
                <Text style={styles.leftText}>{leftText}</Text>
                <Text style={styles.rightText}>{rightText}</Text>
            </View>
        )
    }

    _getBirthdayData = (): BirthdayData | null => {
        const route = this.props.route
        const data: BirthdayData = route.params
        return data
    }

    _renderBirthdayYearHeader = () => {
        return (
            <View style={styles.itemTitleView}>
                <Text style={styles.itemTitle}>{'出生那一年'}</Text>
            </View>
        )
    }

    _renderBirthdayYearDate = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.birthdayDate()
        return this._renderItem('日期', DateHelper.getStringForDate(date))
    }

    _renderBirthdayYearWeek = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.birthdayDate()
        const week = date.getDay()
        return this._renderItem('星期', LunarSolarHelper.getWeekName(week))
    }

    _renderThisYearHeader = () => {
        return (
            <View style={styles.itemTitleView}>
                <Text style={styles.itemTitle}>{'今年的生日'}</Text>
            </View>
        )
    }

    _renderThisYearDate = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.getThisYearSolarBirthdayDate()
        return this._renderItem('日期', DateHelper.getStringForDate(date))
    }

    _renderThisYearWeek = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.getThisYearSolarBirthdayDate()
        const week = date.getDay()
        return this._renderItem('星期', LunarSolarHelper.getWeekName(week))
    }

    _renderNextYearHeader = () => {
        return (
            <View style={styles.itemTitleView}>
                <Text style={styles.itemTitle}>{'下一个生日'}</Text>
            </View>
        )
    }

    _renderNextYearDate = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.getNextYearSolarBirthdayDate()
        return this._renderItem('日期', DateHelper.getStringForDate(date))
    }

    _renderNextYearWeek = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.getNextYearSolarBirthdayDate()
        const week = date.getDay()
        return this._renderItem('星期', LunarSolarHelper.getWeekName(week))
    }

    _renderMoreInfoHeader = () => {
        return (
            <View style={styles.itemTitleView}>
                <Text style={styles.itemTitle}>{'更多信息'}</Text>
            </View>
        )
    }

    _renderMoreInfo = () => {
        const data = this._getBirthdayData()
        if (!isObject(data)) {
            return null
        }
        const date = data!.birthdayDate()
        const eightWords = EightWordsHelper.fromDate(date)
        return (
            <View style={styles.moreInfo}>
                <Text style={styles.moreInfoTitle}>{eightWords}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    scrollView: {
        flex: 1,
    },
    scrollContentView: {
        paddingVertical: 8,
    },
    editBtn: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
    },
    editBtnTitle: {
        fontSize: 17,
        color: '#191919',
    },
    naviBackBtn: {
        width: 40,
        height: 40,
        justifyContent: 'center',
    },
    naviBackBtnImg: {
        width: 24,
        height: 24,
        resizeMode: 'contain',
        tintColor: '#191919',
    },
    header: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        height: 60,
        backgroundColor: 'white',
        paddingHorizontal: 15,
        marginBottom: 8,
    },
    name: {
        fontSize: 17,
        color: '#191919',
    },
    tagView: {
        borderRadius: 3,
        width: 35,
        height: 18,
        marginLeft: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tagTitle: {
        fontSize: 13,
        color: 'white',
    },
    item: {
        width: '100%',
        flexDirection: 'row',
        height: 55,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: 'white',
        paddingHorizontal: 15,
    },
    leftText: {
        fontSize: 17,
        color: '#191919',
    },
    rightText: {
        fontSize: 17,
        color: '#888888',
    },
    itemTitleView: {
        height: 30,
        justifyContent: 'center',
    },
    itemTitle: {
        fontSize: 15,
        color: '#999999',
        marginLeft: 15,
    },
    moreInfo: {
        width: '100%',
        backgroundColor: 'white',
        padding: 15,
    },
    moreInfoTitle: {
        fontSize: 17,
        color: '#888888',
    },
})