/**
 * Created by zzz on 2019/3/5.
 */
'use strict';
import React, {Component} from "react";
import {StyleSheet, Text, View, Image, ART} from "react-native";
import YH_Image from "../../../common/components/YH_Image";
const {Path, Shape, Surface, Group} = ART;
const INVALID_POSITION = -1;
const IMAGE_WIDTH = 50;
const IMAGE_HEIGHT = 50;

export default class ContentMessageTabView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            badgeX: INVALID_POSITION,
            badgeY: INVALID_POSITION,
            badgeWidth: INVALID_POSITION,
            badgeHeight: INVALID_POSITION
        };
        this.onImageLayout = this.onImageLayout.bind(this)
        this.onBadgeLayout = this.onBadgeLayout.bind(this)
    }

    onImageLayout(event) {
        let imageLayout = event.nativeEvent.layout
        this.setState({
            badgeY: imageLayout.y - 4,
            badgeX: imageLayout.x + imageLayout.width / 2 + 17,
        })
    }

    onBadgeLayout(event) {
        let badgeLayout = event.nativeEvent.layout
        this.setState({badgeWidth: badgeLayout.width, badgeHeight: badgeLayout.height})
    }

    renderSurface() {
        if (this.state.badgeWidth != INVALID_POSITION && this.state.badgeHeight != INVALID_POSITION) {
            let width = this.state.badgeWidth, height = this.state.badgeHeight
            let strokeWidth = 1.5
            const radius = (height - strokeWidth) / 2, x = strokeWidth / 2 + radius, y = (height) / 2;
            const path = new Path()
                .moveTo(x, y - radius)
                .counterArc(0, radius * 2, radius)
                .lineTo(width - radius - strokeWidth / 2, y + radius)
                .counterArc(0, -radius * 2, radius).close();
            return <View style={styles.surfaceContainer}>
                <Surface width={width} height={height}>
                    <Group>
                        <Shape d={path} stroke={'#FB2330'} fill={'#FB2330'} strokeWidth={strokeWidth}/>
                    </Group>
                </Surface>
            </View>
        }
        return null;
    }

    render() {
        return <View style={[styles.container, this.props.style]}>
                  <Image style={styles.icon} source={this.props.icon} onLayout={this.onImageLayout}/>
                  <Text style={styles.title}>{this.props.title}</Text>
                  {this.props.badge > 0 && this.state.badgeX != INVALID_POSITION && this.state.badgeY != INVALID_POSITION &&
                      <View style={[styles.badgeContainer, {left: this.state.badgeX, top: this.state.badgeY}]}
                            onLayout={this.onBadgeLayout}>
                          {this.renderSurface()}
                          <Text style={styles.badgeTitle}>{this.props.badge}</Text>
                      </View>
                  }
        </View>
    }
}

let styles = StyleSheet.create({
    container: {
        marginTop: 33,
        marginBottom: 40,
        flexDirection: 'column',
        justifyContent: 'center',
        paddingLeft: 30,
        paddingRight: 30,
    },
    title: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        marginTop: 15,
        color: '#4A4A4A',
        textAlign:'center',
    },
    icon: {
        width: 50,
        height: 50,
    },
    badgeContainer: {
        backgroundColor: 'transparent',
        height: 17,
        minWidth: 17,
        alignItems: 'center',
        justifyContent: 'center',
        flex: 0,
        position: 'absolute'
    },
    surfaceContainer: {
        position: 'absolute',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
    },
    badgeTitle: {
        marginLeft: 5,
        marginRight: 5,
        fontSize: 10,
        color: 'white',
        fontWeight: 'bold',
    }
});