import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Dimensions, Animated } from 'react-native';

type PropsType = {
    values?: string[];
    tabsContainerBackgroundColor?: string;
    tabHeight?: number;
    alignItems?: string;
    flexDirection?: string;
    top?: string;
    color: string;
    activeTabColor?: string;
    fontSize?: number;
    selectedTabWidth?: number;
    activeTabFontSize?: number;
    numberOfLines?: number;
}

{/* <MySegment values={['Details', 'Medication', 'Document', 'RX List', 'Questionaire']}
tabsContainerBackgroundColor='pink' 
tabHeight={50} // optional
alignItems='center' // optional
flexDirection='row'  // optional
top='50%'   // optional
color='black'
activeTabColor='green' // optional
 fontSize={15} // optional
selectedTabWidth={105} 
activeTabFontSize={18}
numberOfLines={1} // optional
/> */}

const MySegment = (props: PropsType) => {

    //Animation
    const direction = new Animated.ValueXY({ x: 0, y: 0 });
    Animated.timing(direction, {
        toValue: { x: 20, y: 0 },
        useNativeDriver: false
    }).start()

    const negativeDirection = new Animated.ValueXY({ x: 0, y: 0 });
    Animated.timing(negativeDirection, {
        toValue: { x: -20, y: 0 },
        useNativeDriver: false
    }).start()

    //Initialization
    const [tabTitles, setTabTitles] = useState(props.values);
    const [elementOneIsPressed, setElementOneIsPressed] = useState<Boolean>();
    const [elementTwoIsPressed, setElementTwoIsPressed] = useState<Boolean>();
    const [elementThreeIsPressed, setElementThreeIsPressed] = useState<Boolean>();
    const [elementFourIsPressed, setElementFourIsPressed] = useState<Boolean>();
    const [elementFiveIsPressed, setElementFiveIsPressed] = useState<Boolean>();
    const [elementSixIsPressed, setElementSixIsPressed] = useState<Boolean>();
    const [elementSevenIsPressed, setElementSevenIsPressed] = useState<Boolean>();

    //Device Width and Height
    let width = Dimensions.get('window').width;
    let height = Dimensions.get('window').height;

    let SegmentTitles: String[] | undefined = tabTitles;
    let NoOfTitles = props.values!.length;
    let ResWidth = width / NoOfTitles;

    let Primary = SegmentTitles === undefined ? null : SegmentTitles[0];
    let secondary = SegmentTitles === undefined ? null : SegmentTitles[1];
    let tertiary = SegmentTitles === undefined ? null : SegmentTitles[2];
    let quaternary = SegmentTitles === undefined ? null : SegmentTitles[3];
    let fifth = SegmentTitles === undefined ? null : SegmentTitles[4];
    let sixth = SegmentTitles === undefined ? null : SegmentTitles[5];
    let seventh = SegmentTitles === undefined ? null : SegmentTitles[6];
    let eith = SegmentTitles === undefined ? null : SegmentTitles[7];

    const elementOne = () => {
        setElementOneIsPressed(true);
        setElementTwoIsPressed(false);
        setElementThreeIsPressed(false);
        setElementFourIsPressed(false);
        setElementFiveIsPressed(false);
        setElementSixIsPressed(false);
        setElementSevenIsPressed(false);
    }

    const elementTwo = () => {
        setElementTwoIsPressed(true);
        setElementOneIsPressed(false);
        setElementThreeIsPressed(false);
        setElementFourIsPressed(false);
        setElementFiveIsPressed(false);
        setElementSixIsPressed(false);
        setElementSevenIsPressed(false);
    }

    const elementThree = () => {
        setElementThreeIsPressed(true);
        setElementOneIsPressed(false);
        setElementTwoIsPressed(false);
        setElementFourIsPressed(false);
        setElementFiveIsPressed(false);
        setElementSixIsPressed(false);
        setElementSevenIsPressed(false);
    }

    const elementFour = () => {
        setElementFourIsPressed(true);
        setElementOneIsPressed(false);
        setElementTwoIsPressed(false);
        setElementThreeIsPressed(false);
        setElementFiveIsPressed(false);
        setElementSixIsPressed(false);
        setElementSevenIsPressed(false);

    }
    const elementFive = () => {
        setElementFiveIsPressed(true);
        setElementOneIsPressed(false);
        setElementTwoIsPressed(false);
        setElementThreeIsPressed(false);
        setElementFourIsPressed(false);
        setElementSixIsPressed(false);
        setElementSevenIsPressed(false);
    }
    const elementSix = () => {
        setElementSixIsPressed(true);
        setElementOneIsPressed(false);
        setElementTwoIsPressed(false);
        setElementThreeIsPressed(false);
        setElementFourIsPressed(false);
        setElementFiveIsPressed(false);
        setElementSevenIsPressed(false);
    }
    const elementSeven = () => {
        setElementSevenIsPressed(true);
        setElementOneIsPressed(false);
        setElementTwoIsPressed(false);
        setElementThreeIsPressed(false);
        setElementFourIsPressed(false);
        setElementFiveIsPressed(false);
        setElementSixIsPressed(false);
    }

    return (
        <View style={{ flexDirection: props.flexDirection ? props.flexDirection : 'row', top: props.top, backgroundColor: props.tabsContainerBackgroundColor, width: '100%', height: props.tabHeight ? props.tabHeight : 30, justifyContent: 'center', alignItems: props.alignItems ? props.alignItems : 'center' }}>
            <TouchableOpacity onPress={() => { elementOne() }} >
                <Animated.View style={{ transform: [{ translateX: direction.x }] }}>
                    {Primary != undefined && Primary != null && Primary != "" ?
                        <View>
                            <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementOneIsPressed ? props.activeTabColor : props.color, fontSize: elementOneIsPressed ? props.activeTabFontSize : props.fontSize, width: elementOneIsPressed ? props.selectedTabWidth : ResWidth, fontWeight: elementOneIsPressed ? '900' : '400' }}>
                                {Primary}
                            </Text>
                        </View>
                        : null}
                </Animated.View>
            </TouchableOpacity>
            <TouchableOpacity onPress={elementTwo}>
                {secondary != undefined && secondary != null && secondary != "" ?
                    <View>
                        <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementTwoIsPressed ? props.activeTabColor : props.color, fontSize: elementTwoIsPressed ? props.activeTabFontSize : props.fontSize, width: elementTwoIsPressed ? props.selectedTabWidth : ResWidth, fontWeight: elementTwoIsPressed ? '900' : '400' }}>
                            {secondary}
                        </Text>
                    </View>
                    : null}
            </TouchableOpacity>
            <TouchableOpacity onPress={elementThree}>
                {tertiary != undefined && tertiary != null && tertiary != "" ?
                    <View>
                        <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementThreeIsPressed ? props.activeTabColor : props.color, fontSize: elementThreeIsPressed ? props.activeTabFontSize : props.fontSize, width: elementThreeIsPressed ? props.selectedTabWidth : ResWidth, fontWeight: elementThreeIsPressed ? '900' : '400', alignItems: props.alignItems }}>
                            {tertiary}
                        </Text>
                    </View>
                    : null}
            </TouchableOpacity>
            <TouchableOpacity onPress={elementFour}>
                {quaternary != undefined && quaternary != null && quaternary != "" ?
                    <View>
                        <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementFourIsPressed ? props.activeTabColor : props.color, fontSize: elementFourIsPressed ? props.activeTabFontSize : props.fontSize, width: elementFourIsPressed ? props.selectedTabWidth : ResWidth, fontWeight: elementFourIsPressed ? '900' : '400' }}>
                            {quaternary}
                        </Text>
                    </View>
                    : null}
            </TouchableOpacity>
            <TouchableOpacity onPress={elementFive}>
                <Animated.View style={{ transform: [{ translateX: negativeDirection.x }] }}>
                    {fifth != undefined && quaternary != null && quaternary != "" ?
                        <View>
                            <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementFiveIsPressed ? props.activeTabColor : props.color, fontSize: elementFiveIsPressed ? props.activeTabFontSize : props.fontSize, width: elementFiveIsPressed ? props.selectedTabWidth : ResWidth, fontWeight: elementFiveIsPressed ? '900' : '400' }}>
                                {fifth}
                            </Text>
                        </View>
                        : null}
                </Animated.View>
            </TouchableOpacity>
            <TouchableOpacity onPress={elementSix}>
                {sixth != undefined && quaternary != null && quaternary != "" ?
                    <View>
                        <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementSixIsPressed ? props.activeTabColor : props.color, fontSize: props.fontSize, width: elementSixIsPressed ? props.selectedTabWidth : ResWidth, fontWeight: elementSixIsPressed ? '900' : '400' }}>
                            {sixth}
                        </Text>
                    </View>
                    : null}
            </TouchableOpacity>
            <TouchableOpacity onPress={elementSeven}>
                {seventh != undefined && quaternary != null && quaternary != "" ?
                    <View>
                        <Text numberOfLines={props.numberOfLines ? props.numberOfLines : 1} style={{ color: elementSevenIsPressed ? props.activeTabColor : props.color, fontSize: props.fontSize, width: elementSevenIsPressed ? ResWidth * 1.3 : ResWidth }}>
                            {seventh}
                        </Text>
                    </View>
                    : null}
            </TouchableOpacity>
        </View>
    )

}

export default MySegment;