import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { useContext } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
import { Divider } from "../Divider";
import { useTranslation } from "react-i18next";
import MyIcon from "../Icon";
import { MyIconButton, MyTextButton } from "../Button";
import MyResult from "../Result";

export default function Sidebar(props) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const MyDrawerItem = ({
    _deviceId,
    label,
    onPress,
    iconName,
    isDevice,
    deviceName,
    deviceModel,
    routeName,
  }) => {
    const isFocused =
      props.state.index ===
      props.state.routes.findIndex((e) => e.name === routeName);

    const focusedColor = isFocused
      ? appContext.appTheme.drawer.item.activeTintColor
      : appContext.appTheme.drawer.item.inactiveTintColor;

    if (isFocused && isDevice) {
      AppSelectedUserDevice.current = {
        id: _deviceId,
        routeName: routeName,
      };
    }

    return (
      <DrawerItem
        label={() =>
          isDevice ? (
            <>
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <View style={{ flex: 1 }}>
                  <Text
                    numberOfLines={1}
                    ellipsizeMode="tail"
                    style={{
                      color: focusedColor,
                      fontWeight: "bold",
                    }}
                  >
                    {deviceName}
                  </Text>
                  <Text style={{ color: appContext.appTheme.textSecondary }}>
                    {deviceModel}
                  </Text>
                </View>

                <TouchableOpacity
                  onPress={() => console.log("Pressed power")}
                  style={{ right: -30 }}
                >
                  <MyIcon
                    name="power"
                    color={appContext.appTheme.drawer.item.iconColor}
                    size={24}
                    style={{ padding: 4 }}
                  />
                </TouchableOpacity>
              </View>
            </>
          ) : (
            <Text
              style={{
                color: focusedColor,
              }}
            >
              {label}
            </Text>
          )
        }
        onPress={onPress}
        icon={({ size }) => (
          <MyIcon
            name={iconName}
            color={appContext.appTheme.drawer.item.iconColor}
            size={size}
          />
        )}
        inactiveTintColor={appContext.appTheme.drawer.item.inactiveTintColor}
        activeBackgroundColor={
          appContext.appTheme.drawer.item.activeBackgroundColor
        }
        focused={isFocused}
      />
    );
  };

  const openModalSearchForNewDevices = () =>
    props.navigation.navigate("modalSearchForNewDevices");

  return (
    <>
      {appContext.isUserDeveloperModeEnabled ? (
        <Image
          source={require("../../../assets/image.png")}
          style={{
            width: "100%",
            height: 250,
          }}
        />
      ) : (
        <View
          style={[
            {
              width: "100%",
              height: 250,
            },
            { backgroundColor: "#ddd" },
          ]}
        />
      )}

      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          marginLeft: 10,
          marginRight: 10,
          marginBottom: 5,
          marginTop: 10,
        }}
      >
        <Text
          style={[AppStyles.typography20, { color: appContext.appTheme.text }]}
        >
          {t("sideBar.devicesTitle")}
        </Text>

        <MyIconButton
          iconName="plus"
          iconSize={24}
          style={{ padding: 2 }}
          onPress={() => openModalSearchForNewDevices()}
        />
      </View>

      <DrawerContentScrollView contentContainerStyle={{ paddingTop: 0 }}>
        {appContext.devices.length > 0 ? (
          appContext.devices.map((device) => (
            <MyDrawerItem
              key={device.id}
              _deviceId={device.id}
              isDevice
              deviceName={device.displayName}
              deviceModel={device.deviceModel}
              onPress={() => props.navigation.navigate(device.displayName)}
              iconName={"glass-stange"}
              routeName={device.displayName}
            />
          ))
        ) : (
          <View style={{ alignItems: "center", marginTop: 20, gap: 10 }}>
            <MyResult
              text={t("sideBar.noDevicesConnected")}
              iconName={"selection-search"}
            />

            <MyTextButton
              title={t("sideBar.textButtonSearchForNewDevices")}
              actionColor
              onPress={() => openModalSearchForNewDevices()}
            />
          </View>
        )}
      </DrawerContentScrollView>

      <View style={{ justifyContent: "flex-end" }}>
        <Divider style={{ marginLeft: 10, marginRight: 10 }} />
        <MyDrawerItem
          label={t("sideBar.help")}
          onPress={() => props.navigation.navigate("Help")}
          iconName="help-circle"
          routeName="Help"
        />
        <MyDrawerItem
          label={t("sideBar.settings")}
          onPress={() => props.navigation.navigate("Settings")}
          iconName="cog"
          routeName="Settings"
        />
      </View>
    </>
  );
}
