cally/components/pages/todos/RepeatFreq.tsx

import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import {DAYS_OF_WEEK_ENUM} from "@/hooks/firebase/types/todoData";

const RepeatFreq = ({ handleRepeatDaysChange }: { handleRepeatDaysChange: Function }) => {
  const [weeks, setWeeks] = useState<number>(1);
  const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);

  useEffect(() => {}, [weeks]);

  return (
    <View row centerV spread marginR-30>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.MONDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
      <RepeatOption value={DAYS_OF_WEEK_ENUM.TUESDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
      <RepeatOption value={DAYS_OF_WEEK_ENUM.WEDNESDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
      <RepeatOption value={DAYS_OF_WEEK_ENUM.THURSDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
      <RepeatOption value={DAYS_OF_WEEK_ENUM.FRIDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
      <RepeatOption value={DAYS_OF_WEEK_ENUM.SATURDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
      <RepeatOption value={DAYS_OF_WEEK_ENUM.SUNDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
    </View>
  );
};

export default RepeatFreq;

const RepeatOption = ({ value, handleRepeatDaysChange }: { value: string, handleRepeatDaysChange: Function }) => {
  const [isSet, setisSet] = useState(false);

  useEffect(() => {
      handleRepeatDaysChange(value, isSet);
  }, [isSet])
  return (
    <TouchableOpacity onPress={() => setisSet(!isSet)}>
      <View
        center
        marginT-8
        marginB-4
        width={28}
        height={28}
        style={{
          backgroundColor: isSet ? "#fd1575" : "white",
          borderRadius: 100,
        }}
      >
        <Text
          style={{
            fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
            color: isSet ? "white" : "gray",
          }}
        >
          {value.at(0)}
        </Text>
      </View>
    </TouchableOpacity>
  );
};