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 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",
          }}
          color="white"
          enableShadow
          onPress={() => setShow(true)}
        >
          <View row centerV centerH>
            <MaterialIcons name="add" size={22} color={"white"} />
            <Text white tex30 style={{ fontSize: 17 }}>
              New
            </Text>
          </View>
        </Button>

        <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>
  );
};
