import { View, Text, Button, Switch } from "react-native-ui-lib";
import React, { useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
import {
  Dialog,
  TextField,
  DateTimePicker,
  Picker,
  ButtonSize,
} from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { StyleSheet } from "react-native";

interface IAddChoreDialog {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
  const { addToDo, toDos } = useToDosContext();

  const [newTitle, setNewTitle] = useState<string>("");
  const [points, setPoints] = useState<number>(10);
  const [choreDate, setChoreDate] = useState<Date | null>(new Date());
  const [rotate, setRotate] = useState<boolean>(false);
  const [repeatType, setRepeatType] = useState<string>("Every week");

  const handleChange = (text: string) => {
    const numericValue = parseInt(text, 10);

    if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
      setPoints(numericValue);
    } else if (text === "") {
      setPoints(0);
    }
  };
  return (
    <Dialog
      bottom={true}
      height={"90%"}
      panDirection={PanningDirectionsEnum.DOWN}
      onDismiss={() => addChoreDialogProps.setIsVisible(false)}
      containerStyle={{
        borderRadius: 10,
        backgroundColor: "white",
        width: "100%",
        alignSelf: "stretch",
        padding: 0,
        paddingTop: 3,
        margin: 0,
      }}
      visible={addChoreDialogProps.isVisible}
    >
      <View row spread>
        <Button
          color="#05a8b6"
          style={styles.topBtn}
          label="Cancel"
          onPress={() => {
            addChoreDialogProps.setIsVisible(false);
          }}
        />
        <Button
          style={styles.topBtn}
          iconSource={() => (
            <Feather name="chevron-down" size={24} color="black" />
          )}
          onPress={() => {
            addChoreDialogProps.setIsVisible(false);
          }}
        />
        <Button
          color="#05a8b6"
          style={styles.topBtn}
          label="Save"
          onPress={() => {
            try {
              addToDo({
                id: 0,
                title: newTitle,
                done: false,
                date: choreDate,
                points: points,
                rotate: rotate,
                repeatType: repeatType,
              });
              addChoreDialogProps.setIsVisible(false);
              console.log(toDos);
            } catch (error) {
                console.error(error)
            }
          }}
        />
      </View>
      <TextField
        placeholder="Add a To Do"
        value={newTitle}
        onChangeText={(text) => {
          setNewTitle(text);
        }}
        placeholderTextColor="#2d2d30"
        text60R
        marginT-15
        marginL-30
      />
      <View style={styles.divider} marginT-8 />
      <View marginL-30 centerV>
        <View row marginB-10>
          {choreDate && (
            <View row centerV>
              <Feather name="calendar" size={25} color="#919191" />
              <DateTimePicker
                value={choreDate}
                text70
                marginL-8
                onChange={(date) => {
                  setChoreDate(date);
                }}
              />
            </View>
          )}
        </View>
        <View row centerV>
          <AntDesign name="clockcircleo" size={24} color="#919191" />
          <Picker
            marginL-8
            placeholder="Select Repeat Type"
            value={repeatType}
            onChange={(value) => {
              if (value) {
                if (value.toString() == "None") {
                  setChoreDate(null);
                  setRepeatType("None");
                } else {
                  setRepeatType(value.toString());
                  setChoreDate(new Date());
                }
              }
            }}
            topBarProps={{ title: "Repeat" }}
            style={{ marginVertical: 5 }}
          >
            {repeatOptions.map((option) => (
              <Picker.Item
                key={option.value}
                label={option.label}
                value={option.value}
              />
            ))}
          </Picker>
        </View>
      </View>
      <View style={styles.divider} />

      <View marginH-30 marginB-10 row centerV>
        <Ionicons name="person-circle-outline" size={28} color="#919191" />
        <Text text70R marginL-10>
          Assignees
        </Text>
        <Button
          size={ButtonSize.small}
          paddingH-8
          iconSource={() => (
            <Ionicons name="add-outline" size={20} color="#ea156c" />
          )}
          style={{
            marginLeft: "auto",
            borderRadius: 8,
            backgroundColor: "#ffe8f1",
            borderColor: "#ea156c",
            borderWidth: 1,
          }}
          color="#ea156c"
          label="Assign"
        />
      </View>
      <View row marginH-13 marginT-13>
        <View
          marginL-30
          style={{
            aspectRatio: 1,
            width: 50,
            backgroundColor: "red",
            borderRadius: 50,
          }}
        />
        <View
          marginL-30
          style={{
            aspectRatio: 1,
            width: 50,
            backgroundColor: "red",
            borderRadius: 50,
          }}
        />
      </View>
      <View row centerV style={styles.rotateSwitch}>
        <Text text80>Take Turns</Text>
        <Switch
          onColor={"#ea156c"}
          value={rotate}
          marginL-10
          onValueChange={(value) => setRotate(value)}
        />
      </View>
      <View style={styles.divider} />
      <View marginH-30 marginB-15 row centerV>
        <Ionicons name="gift-outline" size={25} color="#919191" />
        <Text text70BL marginL-10>
          Reward Points
        </Text>
      </View>
      <PointsSlider
        points={points}
        setPoints={setPoints}
        handleChange={handleChange}
      />
    </Dialog>
  );
};

export default AddChoreDialog;

const styles = StyleSheet.create({
  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
  gradient: {
    height: "25%",
    position: "absolute",
    bottom: 0,
    width: "100%",
  },
  buttonContainer: {
    position: "absolute",
    bottom: 25,
    width: "100%",
  },
  button: {
    backgroundColor: "rgb(253, 23, 117)",
    paddingVertical: 20,
  },
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
  rotateSwitch: {
    marginLeft: 35,
    marginBottom: 10,
    marginTop: 25,
  },
});