Untitled

const AudioRecorder = ({ isVisible, onClose, onMic }) => {
    const [seconds, setSeconds] = useState(0);
    const [isActive, setIsActive] = useState(false);
    const [recorderTitle, setRecorderTitle] = useState('Start Recording...');
    const [showSendButton, setShowSendButton] = useState(false);

    useEffect(() => {
        let interval;

        if (isActive) {
            setShowSendButton(false);
            interval = setInterval(() => {
                setSeconds((prevSeconds) => prevSeconds + 1);
                setRecorderTitle('On Recording...');
                setShowSendButton(true);
            }, 1000);
        } else {
            clearInterval(interval);
        }

        return () => clearInterval(interval);
    }, [isActive]);

    const handleStartPause = () => {
        setIsActive(!isActive);
        setRecorderTitle(isActive ? 'Recorded' : 'On Recording'); // Update title on start/pause
    };

    const handleSend = () => {
        setSeconds(0);
        setIsActive(false);
        setRecorderTitle('Record');
        console.log("Sending recorded audio...");
        setShowSendButton(false); // Reset showSendButton when sending
    };

    const formatTime = (timeInSeconds) => {
        const minutes = Math.floor(timeInSeconds / 60);
        const seconds = timeInSeconds % 60;
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    };

    const renderClose = () => {
        return (
            <TouchableOpacity onPress={() => onClose()}>
                <View style={{ height: 30, width: 30, flexDirection: 'row', alignSelf: 'flex-end' }}>
                    <Image style={styles.imgClose} source={require('../assets/image/ic_white_close.png')} />
                </View>
            </TouchableOpacity>
        );
    };

    const renderBottomSheet = () => {
        return (
            <View style={[styles.textContainer,]}>
                <Text style={{ color: color.black, fontSize: 28 }}>{recorderTitle}</Text>
                <Text style={[styles.timerText,{marginTop:20}]}>{formatTime(seconds)}</Text>
                <View style={{ flexDirection: "row", marginBottom: 30 }}>
                    <TouchableOpacity style={[styles.button,{marginTop:20}]} onPress={handleStartPause}>
                        <Text style={[styles.buttonText]}>{isActive ? 'Stop' : 'Start'}</Text>
                    </TouchableOpacity>
                    {showSendButton && !isActive && (
                        <TouchableOpacity style={[styles.button,{marginTop:20}]} onPress={handleSend}>
                            <Text style={styles.buttonText}>Send</Text>
                        </TouchableOpacity>
                    )}
                </View>
            </View>
        );
    };


    return (
        <Modal
            animationIn="slideInUp"
            animationOut="slideOutDown"
            animationInTiming={500}
            useNativeDriver={true}
            isVisible={isVisible}
            onBackdropPress={false}
            onBackButtonPress={onClose}
            style={{margin: 0}}
        >
            <View style={styles.mainContainer}>
                <View
                    style={{
                        backgroundColor: color.white_bg,
                        borderTopLeftRadius: 20,
                        borderTopRightRadius: 20,
                        paddingTop: pageMargin,
                        paddingBottom: pageMargin,
                        paddingStart: pageMargin,
                        paddingEnd: pageMargin
                    }}>
                    {renderClose()}
                    {renderBottomSheet()}

                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    timerText: {
        fontSize: 36,
        fontFamily:fontStyle.SFProTextSemiBold,
        marginBottom: 20,
        color:color.black
    },
    buttonContainer: {
        flexDirection: 'row',
    },
    button: {
        width:150,
        height:50,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center',
        borderRadius: 40,
        cornerRadius:20,
        backgroundColor: '#4CAF50',
        paddingVertical: 10,
        paddingHorizontal: 20,
        marginHorizontal: 10,

    },
    buttonText: {
        color: 'white',
        fontWeight: 'bold',
    },
    mainContainer: {
        flex: 1,
        justifyContent: 'flex-end',
    },
    textContainer: {
        marginTop: -10,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    Timer:{

        fontFamily:fontStyle.SFProTextSemiBold,
        fontSize:25,
      marginTop:30,
      marginBottom: 30,
    },
    header: {
        fontSize: 28,
        fontFamily: fontStyle.SFProTextSemiBold,
        color: color.black,
    },
    subheader: {
        marginTop: 12,
        fontSize: 20,
        fontFamily: fontStyle.SFProTextBold,
        color: color.black,
    },
    msg: {
        marginTop: 12,
        fontSize: 17,
        fontFamily: fontStyle.SFProTextMedium,
        color: color.gray_1,
    },
    imageContainer: {
        marginTop: 45,
        marginBottom: 30,
        alignItems: 'center',
        alignContent: 'center',
        flexDirection: 'row',
        justifyContent: 'center'
    },
    image: {
        borderRadius: 300,
        width: 164,
        height: 58,

    },
    imgClose: {
        height: 30,
        width: 30
    },
});

export default AudioRecorder