'use strict';

import React from 'react';
import {
    StyleSheet,
    Animated,
    StyleProp,
    ViewStyle,
    LayoutChangeEvent,
} from 'react-native';

const styles = StyleSheet.create({
    labelStyle: {
        fontSize: 15,
        marginHorizontal: 12,
    },
});

export interface LabelProps {
    style?: StyleProp<ViewStyle>;
    selectStyle?: StyleProp<ViewStyle>;
    isActive?: boolean;
    colorValue?: Animated.Value;
    scaleValue?: Animated.Value;
    label?: string;
    onLayout?: (event: LayoutChangeEvent) => void;
}

const Label: React.FC<LabelProps> = ({
                                         style,
                                         //  colorValue,
                                         //  scaleValue,
                                         selectStyle,
                                         isActive,
                                         label,
                                         onLayout,
                                     }) => {
    return (
        <Animated.Text
            // ref={(ref) => (this[`label${index}`] = ref)}
            onLayout={onLayout}
            style={[
                styles.labelStyle,
                {
                    fontWeight: isActive ? 'bold' : 'normal',
                    // color: colorValue,
                    // transform: [{ scale: scaleValue }],
                    color: isActive ? '#000000' : '#333333',
                    // transform: [{scale: isActive ? 1.2 : 1}],
                },
                isActive ? selectStyle : style,
            ]}
            numberOfLines={1}
            adjustsFontSizeToFit>
            {label}
        </Animated.Text>
    );
};

Label.defaultProps = {
    isActive: false,
};

export default Label;