import React, { useState } from "react";
import {
  AntDesign,
  Feather,
  MaterialCommunityIcons,
  MaterialIcons,
} from "@expo/vector-icons";
import {
  Button,
  ButtonSize,
  Card,
  Dialog,
  PanningProvider,
  Text,
  View,
} from "react-native-ui-lib";
import { TouchableOpacity } from "react-native";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import AddChore from "../todos/AddChore";
import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog";

export const AddEventDialog = () => {
  const [show, setShow] = useState(false);
  const [showManualInputModal, setShowManualInputModal] = useState(false);
  const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
  const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);

  const handleOpenManualInputModal = () => {
    setShow(false);
    setTimeout(() => {
      setShowManualInputModal(true);
    }, 500);
  };

  const handleScanImageDialog = () => {
    setShow(false);
    setTimeout(() => {
        setShowUploadDialog(true);
    }, 100);
  }

  return (
    
    <ToDosContextProvider>
    <>
      <Button
        style={{
          position: "absolute",
          bottom: 20,
          right: 20,
          height: 40,
          borderRadius: 30,
          backgroundColor: "#fd1775",
          alignItems: "center",
          justifyContent: "center",
        }}
        centerV
        color="white"
        enableShadow
        iconSource={() => (
          <MaterialIcons name="add" size={22} color={"white"} />
        )}
        onPress={() => setShow(true)}
        label="New"
        text60R
      />

      <Dialog
        visible={show}
        onDismiss={() => setShow(false)}
        panDirection={PanningProvider.Directions.DOWN}
        center
      >
        <Card
          style={{
            paddingHorizontal: 40,
            paddingTop: 40,
            paddingBottom: 20,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Text text50R>Create a new event</Text>

          <View style={{ marginTop: 20, alignItems: "center", width: "100%" }}>
            <Button
              style={{
                marginBottom: 10,
                backgroundColor: "#ea156c",
                justifyContent: "center",
                width: "100%",
                paddingVertical: 13,
              }}
              label="Scan Image"
              onPress={handleScanImageDialog}
              iconSource={() => (
                <Feather
                  name="camera"
                  size={21}
                  style={{ marginRight: 7 }}
                  color="white"
                />
              )}
            />

            <Button
              style={{
                marginBottom: 10,
                backgroundColor: "#e28800",
                justifyContent: "center",
                width: "100%",
                paddingVertical: 13,
              }}
              label="Create Event"
              onPress={handleOpenManualInputModal}
              iconSource={() => (
                <MaterialCommunityIcons
                  name="calendar-text-outline"
                  size={22}
                  style={{ marginRight: 5 }}
                  color="white"
                />
              )}
            />

            <Button
              style={{
                marginBottom: 10,
                backgroundColor: "#05a8b6",
                justifyContent: "center",
                width: "100%",
                paddingVertical: 13,
              }}
              label="Add To Do"
              onPress={() => setChoreDialogVisible(true)}
              iconSource={() => (
                <AntDesign
                  name="checkcircleo"
                  size={20}
                  style={{ marginRight: 7 }}
                  color="white"
                />
              )}
            />
          </View>

          <TouchableOpacity onPress={() => setShow(false)}>
            <Text style={{ marginTop: 20, color: "#999999" }} text70>Go back to calendar</Text>
          </TouchableOpacity>
        </Card>
      </Dialog>
      <AddChoreDialog isVisible={choreDialogVisible} setIsVisible={setChoreDialogVisible} />
      <ManuallyAddEventModal
        show={showManualInputModal}
        close={() => setShowManualInputModal(false)}
      />
      <UploadImageDialog show={showUploadDialog} setShow={setShowUploadDialog} />
    </>
    </ToDosContextProvider>
  );
};