import AsyncStorage from "@react-native-async-storage/async-storage";
import { createContext, useState } from "react";
import { useTranslation } from "react-i18next";
import { Appearance, Platform, StyleSheet } from "react-native";
import uuid from "react-native-uuid";

export const Constants = {
  defaultLanguage: "de",
  languages: [
    {
      name: "de",
      label: "Deutsch",
    },
    {
      name: "en",
      label: "English",
    },
  ],
};

export const AppStyles = StyleSheet.create({
  typography20: {
    fontSize: 20,
    fontWeight: "bold",
    lineHeight: 24,
  },
  typography16: {
    fontSize: 16,
    lineHeight: 24,
  },
  typography14: {
    fontSize: 14,
    lineHeight: 20,
  },
  Shadow: {
    elevation: 2, // only android
    shadowColor: "#000", // only ios
    shadowOffset: { width: 0, height: 1 }, // only ios
    shadowOpacity: 0.2, // only ios
    shadowRadius: 1, // only ios
  },
});

const DarkAppTheme = {
  colors: {
    primary: "#e67e22",
    secondary: "#9b59b6",
  },
  text: "#fff",
  textSecondary: "#ddd",
  backgroundColor: "#21252a",
  card: {
    backgroundColor: "#2b3139",
  },
  drawer: {
    backgroundColor: "#2b3139",
    icon: "#fff",
    item: {
      inactiveTintColor: "#fff",
      activeTintColor: "#e67e22",
      iconColor: "#fff",
      activeBackgroundColor: "rgba(0, 0, 0, 0.1)",
    },
  },
  divider: "#434443",
  textInputBottomColor: "#b2b3b3",
  icon: "#ddd",
  switch: {
    trackColorTrue: "#01d064",
    trackColorFalse: "#b2b3b3",
    thumbColorTrue: "#f4f3f4",
    thumbColorFalse: "#f4f3f4",
    ios_backgroundColor: "#3e3e3e",
  },
  slider: {
    minimumTrackTintColor: "#e67e22",
    maximumTrackTintColor: "#fff",
    thumbTintColor: "#e67e22",
  },
};

const LightAppTheme = {
  colors: {
    primary: "#e67e22",
    secondary: "#9b59b6",
  },
  text: "#000",
  textSecondary: "#555",
  backgroundColor: "#f7f7f7",
  card: {
    backgroundColor: "#fff",
  },
  drawer: {
    backgroundColor: "#fff",
    item: {
      inactiveTintColor: "#000",
      activeTintColor: "#e67e22",
      iconColor: "#000",
      activeBackgroundColor: "rgba(0, 0, 0, 0.05)",
    },
  },
  divider: "#ddd",
  textInputBottomColor: "#b2b3b3",
  icon: "#000",
  switch: {
    trackColorTrue: "#01d064",
    trackColorFalse: "#b2b3b3",
    thumbColorTrue: "#f4f3f4",
    thumbColorFalse: "#f4f3f4",
    ios_backgroundColor: "#3e3e3e",
  },
  slider: {
    minimumTrackTintColor: "#e67e22",
    maximumTrackTintColor: "#555",
    thumbTintColor: "#e67e22",
  },
};

export async function StoreData(key, value) {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem(key, jsonValue);
  } catch (e) {
    console.log("err", e);
  }
}

export async function GetData(key) {
  try {
    const jsonValue = await AsyncStorage.getItem(key);
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    console.log("err", e);
  }
}

export async function GetMultipleData(keys) {
  try {
    const data = await AsyncStorage.multiGet(keys);
    const retrievedData = data.map(([key, value]) => [key, JSON.parse(value)]);
    return retrievedData;
  } catch (e) {
    console.log("err", e);
  }
}

export function GetDataFromList(list, key) {
  return list.find((v) => v[0] === key)[1];
}

export function GetUuid() {
  return uuid.v4();
}

const appContextPreview = {
  appColorScheme: "",
  appLanguage: "",
  isUserExpertModeEnabled: "",
  isUserDeveloperModeEnabled: "",
  appTheme: DarkAppTheme,
  devices: [],
};

export const DevDeviceId = 0;

const devData = [
  {
    id: 0, // deviceId
    selectedScene: 0,
    scenes: [
      {
        id: 1,
        name: "Szene 1",
        actions: [
          {
            id: 0,
            name: "Test",
          },
          {
            id: 1,
            name: "Test1",
          },
        ],
      },
      {
        id: 2,
        name: "Szene 2",
        actions: [
          {
            id: 0,
            name: "Haha",
          },
          {
            id: 1,
            name: "Haha 1",
          },
        ],
      },
    ],
  },
];

export function NewEmptyDeviceScene() {
  return {
    id: GetUuid(),
    name: "Leere Szene",
    actions: [],
  };
}

export const AppContext = createContext(appContextPreview);

export function AppProvider({ children }) {
  const [appLanguage, setAppLanguage] = useState("de");
  const [appColorScheme, setAppColorScheme] = useState("");
  const [appTheme, setAppTheme] = useState(DarkAppTheme);
  const [isUserExpertModeEnabled, setIsUserExpertModeEnabled] = useState(false);
  // TODO: only while development
  const [isUserDeveloperModeEnabled, setIsUserDeveloperModeEnabled] =
    useState(false);
  const [devices, setDevices] = useState(devData);
  const { i18n } = useTranslation();

  const saveAppColorScheme = async (value) => {
    StoreData("appColorScheme", value);
    setAppColorScheme(value);

    let colorScheme;

    colorScheme = value === "auto" ? Appearance.getColorScheme() : value;

    setAppTheme(colorScheme === "light" ? LightAppTheme : DarkAppTheme);
  };

  const saveAppLanguage = async (value) => {
    StoreData("appLanguage", value);
    setAppLanguage(value);
    i18n.changeLanguage(value);
  };

  const saveUserExpertMode = async (value) => {
    StoreData("userExpertMode", value);
    setIsUserExpertModeEnabled(value);
  };

  // TODO: only while development
  const saveUserDeveloperMode = async (value) => {
    StoreData("userDeveloperMode", value);
    setIsUserDeveloperModeEnabled(value);
  };

  return (
    <AppContext.Provider
      value={{
        appLanguage: appLanguage,
        setAppLanguage: saveAppLanguage,
        appColorScheme: appColorScheme,
        setAppColorScheme: saveAppColorScheme,
        appTheme: appTheme,
        isUserExpertModeEnabled: isUserExpertModeEnabled,
        setIsUserExpertModeEnabled: saveUserExpertMode,
        isUserDeveloperModeEnabled: isUserDeveloperModeEnabled,
        setUserIsDeveloperModeEnabled: saveUserDeveloperMode,
        devices: devices,
        setDevices: setDevices,
      }}
    >
      {children}
    </AppContext.Provider>
  );
}

export function IsPlatformIos() {
  return Platform.OS === "ios";
}
