import { useCallback, useContext, useState } from "react";
import { FlatList } from "react-native";
import {
  AppContext,
  AppSelectedUserDevice,
  AppStyles,
  ModalContainer,
} from "../../../../utils";
import { MyPickerModalListItem } from "../../../../Components/Modal";
import { useTranslation } from "react-i18next";
import { MyIconButton, MyTextButton } from "../../../../Components/Button";
import MyResult from "../../../../Components/Result";
import { useFocusEffect } from "@react-navigation/native";

export default function ChooseSceneModalContent({ navigation, route }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const [isSortingAlphabeticalAscending, setIsSortingAlphabeticalAscending] =
    useState(true);

  const { device } = route.params;

  const deviceScenes = appContext.deviceScenes
    .filter((s) => s.deviceId === AppSelectedUserDevice.current.id)
    .sort((a, b) => {
      if (isSortingAlphabeticalAscending) {
        if (a.name < b.name) {
          return -1;
        }

        if (a.name > b.name) {
          return 1;
        }

        return 0;
      } else {
        if (a.name > b.name) {
          return -1;
        }
        if (a.name < b.name) {
          return 1;
        }
        return 0;
      }
    });

  useFocusEffect(
    useCallback(() => {
      navigation.setOptions({
        headerRight: () =>
          deviceScenes.length > 0 && (
            <MyIconButton
              iconName={
                isSortingAlphabeticalAscending
                  ? "sort-alphabetical-ascending"
                  : "sort-alphabetical-descending"
              }
              iconSize={24}
              style={AppStyles.headerNavigationIcons}
              onPress={() => {
                setIsSortingAlphabeticalAscending(
                  !isSortingAlphabeticalAscending
                );
              }}
            />
          ),
      });
    }, [isSortingAlphabeticalAscending])
  );

  return (
    <ModalContainer withoutPadding>
      <FlatList
        data={deviceScenes}
        extraData={isSortingAlphabeticalAscending}
        ListEmptyComponent={
          <MyResult
            text={t("screens.device.scenes.modalChooseScene.noResult")}
            iconName={"selection-search"}
          />
        }
        keyExtractor={(item) => item.sceneId}
        renderItem={({ item }) => (
          <MyPickerModalListItem
            itemName={item.name}
            itemSelected={device.selectedScene === item.sceneId}
            onPress={() => {
              navigation.goBack();

              appContext.setDevices((arr) => {
                const newArr = [...arr];

                newArr[
                  arr.findIndex(
                    (d) => d.id === AppSelectedUserDevice.current.id
                  )
                ].selectedScene = item.sceneId;

                return newArr;
              });
            }}
          />
        )}
        ListFooterComponent={
          <MyTextButton
            styleContainer={{
              alignItems: "center",
              marginTop: 10,
            }}
            style={{ padding: 8 }}
            actionColor={!deviceScenes.length}
            onPress={() => navigation.navigate("modalCreateScene")}
            title={t(
              "screens.device.scenes.modalChooseScene.textButtonAddScene"
            )}
            iconName="plus-circle-outline"
          />
        }
      />
    </ModalContainer>
  );
}
