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 { StyleSheet, 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";
import CameraIcon from "@/assets/svgs/CameraIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";

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 style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
            New
          </Text>
          </View>
        </Button>

        <Dialog
          visible={show}
          onDismiss={() => setShow(false)}
          panDirection={PanningProvider.Directions.DOWN}
          center
        >
          <Card style={styles.dialogCard}>
            <Text text60 style={styles.modalTitle}>
              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"
                labelStyle={styles.btnLabel}
                onPress={handleScanImageDialog}
                iconSource={() => (
                  <CameraIcon color="white" style={styles.btnIcon} />
                )}
              />

              <Button
                style={{
                  marginBottom: 10,
                  backgroundColor: "#e28800",
                  justifyContent: "center",
                  width: "100%",
                  paddingVertical: 13,
                }}
                label="Create Event"
                labelStyle={styles.btnLabel}
                onPress={handleOpenManualInputModal}
                iconSource={() => (
                  <CalendarIcon color={"white"} style={styles.btnIcon} />
                )}
              />

              <Button
                style={{
                  marginBottom: 10,
                  backgroundColor: "#05a8b6",
                  justifyContent: "center",
                  width: "100%",
                  paddingVertical: 13,
                }}
                label="Add To Do"
                labelStyle={styles.btnLabel}
                onPress={() => setChoreDialogVisible(true)}
                iconSource={() => (
                  <NavToDosIcon
                    color={"white"}
                    width={23}
                    style={styles.btnIcon}
                  />
                )}
              />
            </View>

            <TouchableOpacity onPress={() => setShow(false)}>
              <Text style={styles.bottomText} 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>
  );
};

const styles = StyleSheet.create({
  modalTitle: {
    fontSize: 22,
    fontFamily: "Manrope_600SemiBold",
    marginBottom: 16,
  },
  bottomText: {
    marginTop: 20,
    color: "#999999",
    fontSize: 13.53,
    fontFamily: "Poppins_500Medium",
  },
  dialogCard: {
    paddingHorizontal: 40,
    paddingTop: 35,
    paddingBottom: 20,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
  },
  btnLabel: {
    fontSize: 15,
    fontFamily: "PlusJakartaSans_500Medium",
  },
  btnIcon: { marginRight: 10 },
});