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 = ({ repeatDays, handleRepeatDaysChange }: { repeatDays: string[], 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} repeatDays={repeatDays}/>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.TUESDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.WEDNESDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.THURSDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.FRIDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.SATURDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
      <RepeatOption value={DAYS_OF_WEEK_ENUM.SUNDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
    </View>
  );
};

export default RepeatFreq;

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


  const handleDayChange = () => {
      handleRepeatDaysChange(value, !isSet)
      setisSet(!isSet);
  }

  return (
    <TouchableOpacity onPress={handleDayChange}>
      <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>
  );
};