import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";

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

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

  return (
    <View row centerV>
      <View row centerV>
        <RepeatOption value={"Monday"} />
        <RepeatOption value={"Tuesday"} />
        <RepeatOption value={"Wednesday"} />
        <RepeatOption value={"Thirsday"} />
        <RepeatOption value={"Friday"} />
        <RepeatOption value={"Saturday"} />
        <RepeatOption value={"Sunday"} />
      </View>
      <View row gap-5 centerV>
        <Picker
          centered
          marginL-10
          marginR-0
          paddingR-0
          textAlign="right"
          trailingAccessory={
            <Text
              style={{ fontFamily: "Manrope_600SemiBold", color: "#fd1575" }}
            >
              {weeks == 1 ? "Week" : "Weeks"}
            </Text>
          }
          value={weeks}
          onChange={(value) => {
            if (typeof value === "number") {
              setWeeks(value);
            }
          }}
          placeholder={"Select number of weeks"}
          useWheelPicker
          color={"#fd1575"}
          style={{
            maxWidth: 18,
            fontFamily: "Manrope_700Bold",
          }}
          containerStyle={{
            borderWidth: 1,
            borderRadius: 6,
            paddingRight: 5,
            paddingLeft: 3,
            borderColor: "#fd1575",
            backgroundColor: "#ffe8f1",
          }}
        >
          {weekOptions.map((num) => (
            <Picker.Item key={num} value={num} label={`${num}`} />
          ))}
        </Picker>
      </View>
    </View>
  );
};

export default RepeatFreq;

const RepeatOption = ({ value }: { value: string }) => {
  const [isSet, setisSet] = useState(false);
  return (
    <TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}>
      <Text
        style={{
          fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
          color: isSet ? "#fd1575" : "gray",
        }}
      >
        {value.at(0)}
      </Text>
    </TouchableOpacity>
  );
};