import { FlatList, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, AppStyles, DevDeviceId } from "../../utils";
import { useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import MyDropdown from "../../Components/Dropdown";
import MyIcon from "../../Components/Icon";
import MyModal, { MyPickerDefaultHeader } from "../../Components/Modal";
import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
import ChooseSceneModalContent from "./modals/ChooseScene";
import AddSceneActionModalContent from "./modals/AddSceneAction";
import LayerSelectionModalContent from "./modals/AddSceneAction/LayerSelection";
import LayersActionEditModalContent from "./modals/ActionEdits/Layers";

function NothingSelected({ text }) {
  const appContext = useContext(AppContext);

  return (
    <View
      style={{
        alignItems: "center",
        marginTop: 40,
      }}
    >
      <MyIcon name="selection-search" size={64} />
      <Text
        style={[
          AppStyles.typography16,
          { color: appContext.appTheme.text, marginTop: 10 },
        ]}
      >
        {text}
      </Text>
    </View>
  );
}

export default function SceneView() {
  const appContext = useContext(AppContext);

  const [modalOpenStates, setModalOpenStates] = useState({
    modalChooseSceneIsOpen: false,
    modalCreateSceneIsOpen: false,
    modalAddSceneActionIsOpen: false,
    modalLayerSectionIsOpen: false,
    modalLayersActionEditIsOpen: false,
  });

  const setModalOpen = (modalName, open) => {
    console.log("setModalOpen", modalName, open);

    setModalOpenStates((prevState) => ({
      ...prevState,
      [modalName]: open,
    }));
  };

  const device = appContext.devices.find((device) => device.id === DevDeviceId);

  const deviceScene = device.scenes.find(
    (scene) => scene.id === device.selectedScene
  );

  const closeChooseSceneModals = () => {
    setModalOpenStates((prevState) => ({
      ...prevState,
      modalChooseSceneIsOpen: false,
      modalCreateSceneIsOpen: false,
    }));
  };

  const actionColor =
    deviceScene === undefined || deviceScene.actions.length === 0
      ? appContext.appTheme.colors.primary
      : appContext.appTheme.textSecondary;

  return (
    <>
      <Card>
        <MyDropdown
          label={"Szene"}
          onPress={() => {
            console.log("pressed");
            setModalOpen("modalChooseSceneIsOpen", true);
          }}
          selectedItemLabel={
            device.selectedScene === 0
              ? "Keine Szene ausgewählt"
              : device.scenes.find((scene) => scene.id === device.selectedScene)
                  .name
          }
        />
      </Card>
      {device.selectedScene === 0 ? (
        <NothingSelected text="Keine Szene ausgewählt" />
      ) : (
        <View>
          {deviceScene.actions.length === 0 ? (
            <NothingSelected text="Keine Aktionen in der Szene vorhanden" />
          ) : (
            <FlatList
              scrollEnabled={false}
              data={deviceScene.actions}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => (
                <Card cardBackgroundColor={appContext.appTheme.colors.primary}>
                  <Text>{item.name}</Text>
                </Card>
              )}
            />
          )}

          <TouchableOpacity
            onPress={() => setModalOpen("modalAddSceneActionIsOpen", true)}
          >
            <View
              style={{
                flexDirection: "row",
                justifyContent: "center",
                alignItems: "center",
                marginTop: 20,
              }}
            >
              <MyIcon
                name="plus-circle-outline"
                size={24}
                style={{
                  marginRight: 10,
                  color: actionColor,
                }}
              />
              <Text style={{ color: actionColor }}>Aktion hinzufügen</Text>
            </View>
          </TouchableOpacity>
        </View>
      )}
      <MyModal
        isOpen={modalOpenStates.modalChooseSceneIsOpen}
        closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
        header={
          <MyPickerDefaultHeader
            title={"Wähle eine Szene aus"}
            closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
          />
        }
        content={
          <ChooseSceneModalContent
            openCreateSceneModal={() =>
              setModalOpen("modalCreateSceneIsOpen", true)
            }
          />
        }
      >
        <MyModal
          isOpen={modalOpenStates.modalCreateSceneIsOpen}
          closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
          header={
            <MyPickerDefaultHeader
              title={"Szene erstellen"}
              closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
            />
          }
          content={
            <CreateSceneModalContent
              closeChooseSceneModals={closeChooseSceneModals}
            />
          }
        />
      </MyModal>

      <MyModal
        scrollView
        isOpen={modalOpenStates.modalAddSceneActionIsOpen}
        closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
        header={
          <MyPickerDefaultHeader
            title={"Aktion hinzufügen"}
            closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
          />
        }
        content={
          <AddSceneActionModalContent
            openLayerSelectionModal={() =>
              setModalOpen("modalLayerSectionIsOpen", true)
            }
          />
        }
      >
        <MyModal
          scrollView
          isOpen={modalOpenStates.modalLayerSectionIsOpen}
          closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
          header={
            <MyPickerDefaultHeader
              title={"Layer auswahl"}
              closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
            />
          }
          content={
            <LayerSelectionModalContent
              openLayersActionEditModal={() =>
                setModalOpen("modalLayersActionEditIsOpen", true)
              }
            />
          }
        >
          <MyModal
            scrollView
            isOpen={modalOpenStates.modalLayersActionEditIsOpen}
            closeModal={() =>
              setModalOpen("modalLayersActionEditIsOpen", false)
            }
            header={
              <MyPickerDefaultHeader
                title={"Layer Action bearbeiten"}
                closeModal={() =>
                  setModalOpen("modalLayersActionEditIsOpen", false)
                }
              />
            }
            content={<LayersActionEditModalContent />}
          />
        </MyModal>
      </MyModal>
    </>
  );
}
