CardWhite

import * as React from 'react';
import { connect } from 'react-redux'
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { Grid, Col, Icon } from 'native-base'
import gStyle from '../styles/StylesGlobal';
import { Actions } from 'react-native-router-flux';
import { styles } from './Styles/StylesPromote';
import { formattedTimeAgo } from '../../utils/textUtils'
import { formatNumber, formatKm, formatDistance, formatScore } from '../../utils/Numbers'
class TalentSearchPromote extends React.Component {
    onGoesTo = (data) => {

        const {
            saveEmployee
        } = this.props

        saveEmployee(data).then(() => {
            if (this.props.blocked === 'block') {
                Actions.DetailBlocked()
            } else if (this.props.blocked === 'unblock') {
                Actions.DetailNonBlocked()
            } else if (this.props.act === 'DetailPelamar') {
                Actions.DetailPelamar({ status: this.props.status })
            }
        })

    }

    renderBirth(data) {
        let result = formattedTimeAgo(data)
        let split = result.split(' ')
        return split[0] + " Tahun"
    }

    medaliAsisten = (data) => {
        let medaliZero = 5
        let dataMedali = []
        const medali = parseInt(data);
        // let html = <Image source={require('./medali.png')} style={styles.widthImgMedal} />;

        let medaliHtml = (
            <View >
                <Image source={require('./medali.png')} style={styles.widthImgMedal} />
            </View>
        )

        let medaliZeroHtml = (
            <View >
                <View style={styles.widthImgMedal} />
            </View>
        )


        if (medali > 0) {
            medaliZero -= medali
            for (let i = 0; i < medali; i++) {
                dataMedali.push(medaliHtml)
            }

            for (let i = 0; i < medaliZero; i++) {
                // dataMedali.push(medaliZeroHtml)
            }
        } else if (medaliZero == 5) {
            for (let i = 0; i < medaliZero; i++) {
                // dataMedali.push(medaliZeroHtml)
            }
        }


        return dataMedali;
    }

    render() {
        // const { data } = this.props
        console.log('Props Card', this.props)

        const {
            data
        } = this.props

        const {
            user, expectedSalary, medal, score, currentSelfPromotion, distance, random, expectedJobCategories
        } = data ? data : {}

        const {
            fullname, village, birthdate, photo, photoUrl, employeePsychotestResult, gender, maritalStatus
        } = user ? user : {}

        const {
            district
        } = village ? village : {}

        const {
            city
        } = district ? district : {}

        const {
            name
        } = city ? city : {}

        return (
            <View>
                <TouchableOpacity style={styles.marginTop10} onPress={() => this.onGoesTo(data)}>
                    <View style={[gStyle.globalWrapper, styles.shadowCard]}>
                        <Grid>
                            <Col style={{ width: 105 }}>
                                <View style={styles.wrapperImgProfil}>
                                    <Image source={photo ? { uri: photoUrl } : require('../../assets/user-profile.png')} style={styles.profilImg} resizeMode='cover' />
                                </View>
                            </Col>
                            <Col>
                                <View style={gStyle.globalFlexLeft}>
                                    <Text
                                        numberOfLines={1}
                                        style={[gStyle.globalTextQuicksandsSemi, gStyle.globalFont16, gStyle.FONT_CAPITALIZE]} >
                                        {fullname ? fullname.substring(0, 14) : "Tidak ada nama"}
                                    </Text>
                                </View>
                                <View style={{ marginTop: 6 }}>
                                    <Text
                                        numberOfLines={1}
                                        style={[gStyle.globalTextGray]}>
                                        {distance ? formatDistance(distance) + " - " : null} {name ? name : ""}
                                    </Text>
                                </View>
                                <View style={[gStyle.globalFlexLeft, { marginTop: 0 }]}>
                                    <Text numberOfLines={1}
                                        style={[gStyle.globalFont14, { color: 'gray' }]}>
                                        {gender && gender === 'female' ? 'Wanita, ' : 'Pria, '}
                                    </Text>
                                    <Text numberOfLines={1}
                                        style={[gStyle.globalFont14, { color: 'gray' }]}>
                                        {maritalStatus && maritalStatus === 'single' ? 'Lajang, ' : 'Menikah, '}
                                    </Text>
                                    <Text
                                        numberOfLines={1}
                                        style={[gStyle.globalFont14, { color: 'gray' }]}>
                                        {birthdate ? this.renderBirth(birthdate) : ""}
                                    </Text>
                                </View>
                                <View style={{ marginTop: 10 }} />
                                <View style={gStyle.globalFlexLeft}>
                                    <View>
                                        <Text>
                                            {medal}/5
                                        </Text>
                                    </View>
                                    <View style={{ marginLeft: 5 }}>
                                        <View style={gStyle.globalFlexLeft}>
                                            {medal ? this.medaliAsisten(medal).reverse() : this.medaliAsisten(0)}
                                        </View>
                                    </View>
                                </View>
                                <View style={{ marginTop: 2, display: 'none' }}>
                                    <Text style={[gStyle.globalTextQuicksandsSemi]} >
                                        Rp. {expectedSalary ? formatNumber(expectedSalary) : 0}
                                    </Text>
                                </View>
                            </Col>
                        </Grid>
                        <View style={[gStyle.UNDERLINE, { marginBottom: 10 }]} />
                        <View style={gStyle.globalSpaceBetween}>
                            <View>
                                <View>
                                    <Text style={gStyle.TEXT_REGULAR_BLACK}>Skor Pekerja : <Text style={styles.skorPoint}>{score ? formatScore(score) : 0}</Text></Text>
                                </View>
                            </View>

                            <View style={styles.bgCheckmark}>
                                <Icon name="md-checkmark" style={styles.chekMark} />
                            </View>
                            {/* <View style={[gStyle.globalMarginLeft15]}>
                                <View style={gStyle.globalFlexRight}>
                                    <View style={{ marginRight: 5 }}>
                                        <Text>
                                            {medal}/5
                                        </Text>
                                    </View>
                                    <View style={gStyle.globalFlexLeft}>
                                        {medal ? this.medaliAsisten(medal).reverse() : this.medaliAsisten(0)}
                                    </View>
                                </View>
                            </View> */}
                        </View>
                        <View style={[gStyle.UNDERLINE, { marginTop: 10, marginBottom: 10 }]} />
                        <View>
                            <Text style={gStyle.TEXT_REGULAR_BLACK}>Tipe Kepribadian :
                                        <Text style={styles.skorPoint}>
                                    {employeePsychotestResult && employeePsychotestResult.personality && employeePsychotestResult.personality.title ? employeePsychotestResult.personality.title : " -"}
                                </Text>
                            </Text>
                        </View>
                        <View style={{ marginTop: 5 }}>
                            <Text>
                                {expectedJobCategories.map((item, i) =>
                                    <Text style={styles.jobCategory}>
                                        {item && item.jobCategory && item.jobCategory.name ? item.jobCategory.name + ', ' : '-'}
                                    </Text>
                                )}
                            </Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const mapDispatch = ({ employees }) => ({
    saveEmployee: (data) => employees.saveEmployee(data),
})

export default connect(null, mapDispatch)(TalentSearchPromote)