import { useState } from "react";
import { StyleSheet } from "react-native";
import { Button, Card, Checkbox, Text, View } from "react-native-ui-lib";
import AddReminderModal from "./addReminderModal";
import ButtonOutlined from "@/components/ui/ButtonOutlined";
import AntDesign from "@expo/vector-icons/AntDesign";
import Feather from "@expo/vector-icons/Feather";
import { ScrollView } from "react-native-gesture-handler";
import { IReminder, useRemindersContext } from "@/contexts/RemindersContext";



const dateTimeDisplay = (date: Date) => {
  const day = String(date.getDate()).padStart(2, "0");
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");

  return (
    <Text text80>
      {`${day}/${month}/${year}`}{" "}
      <AntDesign name="star" size={14} color="lightgray" />{" "}
      {`${hours}:${minutes}`}
    </Text>
  );
};

const RemindersList = () => {
  const {reminders, addReminder, updateReminder} = useRemindersContext();
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleModalClose = () => {
    setIsModalVisible(false);
  };
  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      style={styles.listContainer}
    >
      <AddReminderModal
        visible={isModalVisible}
        onClose={handleModalClose}
        onSave={addReminder}
      />
      <View
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Text text70BL>Reminders</Text>
        <ButtonOutlined
          title={"New Reminder"}
          size={Button.sizes.small}
          onPress={() => setIsModalVisible(true)}
        />
      </View>
      <View style={styles.cardList}>
        {reminders.map((reminder, index) => (
          <Card key={index} style={{ marginBottom: 10, padding: 15 }}>
            <View style={styles.card} row>
              <View row>
                <View style={styles.icon}>
                  <Feather name="scissors" size={24} color="black" />
                </View>
                <View>
                  <Text text70BL>{reminder.title}</Text>
                  {dateTimeDisplay(reminder.date)}
                </View>
              </View>
              <Checkbox
                size={30}
                color="#f68d50"
                value={reminder.done}
                onValueChange={() => {
                  updateReminder(reminder.id, {done: !reminder.done})
                }}
              />
            </View>
          </Card>
        ))}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: "row",
  },
  listContainer: {
    marginLeft: "8%",
    marginTop: "4%",
    marginRight: "4%",
    maxHeight: '71%'
  },
  button: {
    backgroundColor: "white",
    color: "black",
    borderColor: "lightgray",
    borderWidth: 1,
    borderRadius: 5,
  },
  buttonText: {
    margin: 0,
  },
  card: {
    display: "flex",
    justifyContent: "space-between",
  },
  cardList: {
    marginTop: 10,
  },
  icon: {
    borderRadius: 50,
    height: 45,
    width: 45,
    backgroundColor: "#fcf4eb",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 10,
  },
});
export default RemindersList;