calendarpopup

import React, { useState } from "react"
import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from "react-native"
import moment from "moment"
import { Calendar } from "react-native-calendars"
import ButtonComponent from "./ButtonComponent"
import { SheetModal } from "./SheetModal"
import CalendarIconTheme from '../../assets/Icons/track-activity/calendar-theme.svg'
import DayBgGradientIcon from '../../assets/Icons/track-activity/gradient-btn-bg.svg'
import { colors } from "../../theme"
import fonts from "../../assets/fonts"
import { height, width } from "../../constants/constants"
import { useSelector } from "react-redux"
import { fontSize } from "../../utils/fontUtils"

interface CalendarPopupTypes {
    visible: boolean;
    setVisible: () => void;
    key: string;
    title: string;
    subTitle: string;
    style: ViewStyle;
    onSetDate: (val: any) => void;
    onCancel: (val: any) => void;
}

export const CalendarPopup: React.FC<CalendarPopupTypes> = ({
    visible,
    setVisible,
    key,
    title,
    subTitle,
    style,
    onSetDate,
    onCancel
}) => {

    const { selectedDate } = useSelector(store => store.userDetails)

    const [selectedDateVal, setSelectedDateVal] = useState(selectedDate);
    const [selectedDay, setSelectedDay] = useState(moment().format('YYYY-MM-DD'))

    return (
        <SheetModal
            visible={visible}
            setVisible={setVisible}
            key={key && key}
            style={{ justifyContent: 'flex-end', margin: 0 }}>
            <View style={styles.modalView}>
                <View style={styles.modalContainer}>
                    <CalendarIconTheme />
                    {title && <Text style={styles.title}>{title}</Text>}
                    {subTitle && <Text style={styles.subTitle}>{subTitle}</Text>}
                    <Calendar
                        style={{ width: width * 0.95 }}
                        markedDates={{
                            [selectedDay]: { selected: true },
                        }}
                        theme={{
                            selectedDayBackgroundColor: '#00adf5',
                            selectedDayTextColor: '#ffffff',
                        }}
                        initialDate={selectedDate}
                        dayComponent={date => {
                            let pressedDate = date?.date?.day
                            let pressedMonth = date?.date?.month
                            let pressedYear = date?.date?.year
                            let pressedDateObj = moment(`${pressedYear}-${String(pressedMonth).padStart(2, '0')}-${String(pressedDate).padStart(2, '0')}`, "YYYY-MM-DD");
                            let today = moment();

                            return (
                                selectedDateVal === date?.date?.dateString ?
                                    <View style={styles.selectedDateContainer}>
                                        <DayBgGradientIcon style={styles.selectedDateIcon} />
                                        <Text style={styles.selectedDateText}>{date?.date?.day}</Text>
                                    </View>
                                    :
                                    <TouchableOpacity
                                        style={selectedDateVal === date?.date?.dateString ? [
                                            styles.dayContainerStyles, { backgroundColor: 'red' }
                                        ] : styles.dayContainerStyles}
                                        onPress={() => {
                                            setSelectedDay(date?.date?.dateString);
                                            setSelectedDateVal(date?.date?.dateString);
                                        }}>
                                        <Text style={styles.dayStyles}>{date?.date?.day}</Text>
                                    </TouchableOpacity>
                            )
                        }}
                    />
                    <View style={styles.bottomBtnsContainer}>
                        <View style={{ flex: 1 }}>
                            <TouchableOpacity
                                onPress={onCancel}
                                style={styles.buttonOutline}>
                                <Text style={styles.cancelBtnTxt}>Cancel</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={{ flex: 1 }}>
                            <ButtonComponent
                                isActive
                                title={'Set Date'}
                                customHeight={width / 7.85}
                                style={styles.gradientPopupButton}
                                textStyle={styles.btnTxtWhite}
                                onPress={() => onSetDate(selectedDateVal)}
                            />
                        </View>
                    </View>
                </View>
            </View>
        </SheetModal>
    )
}

const styles = StyleSheet.create({
    btnTxtWhite: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.white
    },
    bottomBtnsContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 20,
        gap: 8,
    },
    buttonOutline: {
        backgroundColor: colors.white,
        borderWidth: 1,
        borderRadius: 40,
        padding: 14,
        width: '100%',
        borderColor: colors.green,
        alignItems: 'center',
        justifyContent: 'center',
        height: width / 7.85
    },
    dayContainerStyles: {
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center',
    },
    fs12ppMdMuted: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsMedium,
        color: '#BDBEBD',
    },
    dayStyles: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsMedium,
        color: colors.LIGHT_BLACK,
    },
    cancelBtnTxt: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.green,
    },
    gradientPopupButton: {
        borderRadius: 40,
        width: '100%'
    },
    modalContainer: {
        padding: 16,
        paddingTop: 28,
        alignItems: 'center',
        justifyContent: 'center'
    },
    modalView: {
        backgroundColor: colors.white,
        borderTopLeftRadius: 24,
        borderTopRightRadius: 24,
        height: height * .7
    },
    p16: {
        padding: 16,
    },
    rowCenterApart: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    selectedDateContainer: {
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center',
    },
    selectedDateIcon: {
        position: 'absolute',
        alignSelf: 'center',
    },
    selectedDateText: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsMedium,
        color: colors.white
    },
    subTitle: {
        fontSize: fontSize.fs12,
        fontFamily: fonts.PoppinsMedium,
        color: colors.mutedGrey,
        textAlign: 'center'
    },
    title: {
        fontSize: fontSize.fs18,
        fontFamily: fonts.PoppinsBold,
        color: colors.black,
        textAlign: 'center',
    }
})