import React from 'react'
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import BirthdayData from '../data/BirthdayData'
import {isFunction} from '../../Common/tool/TypeTool'

type PropsType = {
    onPressItem: (data: BirthdayData) => void
    data: BirthdayData
}

export default class BirthdayItem extends React.Component<PropsType> {
    render() {
        const data: BirthdayData = this.props.data
        const name: string = data.getShowName()
        const birthdayInfo: string = data.getBirthdayInfo()
        const remainDays: string = data.getNextBirthdayRemainDaysString()
        const remainDaysStyle = data.getNextBirthdayRemainDays() < 7 ? {color: '#FF464A'} : {color: '#999999'}
        return (
            <TouchableOpacity style={styles.container} onPress={this._onPressItem.bind(this, data)}>
                <Text style={styles.name}>{name}</Text>
                <Text style={styles.birthdayInfo}>{birthdayInfo}</Text>
                <Text style={[styles.remainDays, remainDaysStyle]}>{remainDays}</Text>
                <View style={styles.line} />
            </TouchableOpacity>
        )
    }

    _onPressItem = (data: BirthdayData) => {
        isFunction(this.props.onPressItem) && this.props.onPressItem(data)
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 75,
        paddingHorizontal: 15,
        backgroundColor: 'white',
    },
    name: {
        fontSize: 17,
        color: '#191919',
        marginTop: 15,
    },
    birthdayInfo: {
        fontSize: 15,
        color: '#aaaaaa',
        marginTop: 10,
    },
    remainDays: {
        fontSize: 15,
        position: 'absolute',
        right: 15,
        top: 29,
    },
    line: {
        position: 'absolute',
        bottom: 0,
        height: 1,
        left: 15,
        right: 0,
        backgroundColor: '#eeeeee',
    },
})