weightpickerpopup

import React, { useRef, useState } from "react"
import { Dimensions, FlatList, Pressable, StyleSheet, Text, View, } from "react-native"
import ButtonComponent from "./ButtonComponent"
import { SheetModal } from "./SheetModal"
import { colors } from "../../theme"
import fonts from "../../assets/fonts"
import { weightJSON } from "../../constants/constants"
import { useSelector } from "react-redux"

interface WeightPickerPopupTypes {
    visible: boolean;
    setVisible: () => void;
    onUpdate: () => void;
}

export const WeightPickerPopup: React.FC<WeightPickerPopupTypes> = ({
    visible,
    setVisible,
    onUpdate
}) => {
    const itemWidth = 65;
    const {user} = useSelector(store=>store?.userDetails)
    
    const weightListRef = useRef(null)
    const [selectedWeightItem, setSelectedWeightItem] = useState(user?.weight?.toString()||'55');

    const renderWeightItem = ({ item, index }) => {
        const handleWeightItemPress = () => {
            setSelectedWeightItem(weightJSON[index]?.kgValue)
        }
        return (
            <Pressable
                style={
                    [styles.weightItem, item?.kgValue === selectedWeightItem && styles.selectedWeightItemContainer]}
                onPress={handleWeightItemPress}>
                <Text style={[styles.fs24ppReg999, item?.kgValue === selectedWeightItem && styles.fs24ppSbGreen]}>{item?.kgValue}</Text>
            </Pressable>
        );
    };

    return (
        <SheetModal
            visible={visible}
            setVisible={setVisible}
            style={{ justifyContent: 'flex-end', margin: 0 }}
            key={'weight-modal-sheet-popup'}>
            <View style={styles.modalView}>
                <Text style={{ ...styles.fs18ppSb000, marginVertical: 8 }}>Update Weight</Text>
                <Text style={styles.fs14ppReg75}>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>

                <FlatList
                    ref={weightListRef}
                    data={weightJSON}
                    renderItem={renderWeightItem}
                    keyExtractor={(item) => item}
                    horizontal
                    bounces={false}
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={styles.weightItemsListContainer}
                    getItemLayout={(data, index) => ({
                        length: itemWidth,
                        offset: itemWidth * index,
                        index,
                    })}
                />
                <Text style={{ ...styles.fs14ppReg75, textAlign: 'center' }}>Kg's</Text>
                <ButtonComponent
                    isActive
                    onPress={()=>onUpdate(selectedWeightItem)}
                    title={'Update Weight'} />
            </View>
        </SheetModal>
    )
}

const styles = StyleSheet.create({
    fs14ppReg75: {
        fontSize: 14,
        fontFamily: fonts.PoppinsRegular,
        fontWeight: '400',
        color: colors.mutedGrey
    },
    fs18ppSb000: {
        fontSize: 18,
        fontFamily: fonts.PoppinsSemiBold,
        fontWeight: '600',
        color: colors.black,
    },
    fs24ppReg999: {
        fontSize: 24,
        fontFamily: fonts.PoppinsRegular,
        fontWeight: '400',
        color: colors.c999999
    },
    fs24ppSbGreen: {
        fontSize: 24,
        fontFamily: fonts.PoppinsSemiBold,
        fontWeight: '600',
        color: colors.green
    },
    modalView: {
        backgroundColor: colors.white,
        padding: 16,
        borderTopLeftRadius: 24,
        borderTopRightRadius: 24,
    },
    selectedWeightItemContainer: {
        width: 60,
        height: 60,
        marginHorizontal: 6,
        backgroundColor: colors.lightGreenBg,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 40,
    },
    weightItem: {
        padding: 12,
        marginHorizontal: 4,
        alignItems: 'center',
        justifyContent: 'center'
    },
    weightItemsListContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        flexGrow: 1,
        marginVertical: 16
    },
})