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

export const Constants = {
  defaultLanguage: "de",
  languages: [
    {
      name: "de",
      label: "Deutsch",
    },
    {
      name: "en",
      label: "English",
    },
  ],
  actionType: {
    layers: 0,
    ambilight: 1,
    motor: 2,
  },
};

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
  },
  modal: {
    flex: 1,
    padding: 10,
  },
});

const DarkAppTheme = {
  _id: "dark", // needed for status bar
  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",
  },
  tag: {
    red: {
      backgroundColor: "#3d0801",
      text: "#fe4f50",
      borderColor: "#760b01",
    },
  },
};

const LightAppTheme = {
  _id: "light", // needed for status bar
  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",
  },
  tag: {
    red: {
      backgroundColor: "#fff3f1",
      text: "#ff6060",
      borderColor: "#fecdc7",
    },
  },
};

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();
}

// data set in the app by default or provided by our servers on firmware update
const devDevicesFirmwareModes = {
  lightModes: [
    {
      id: "6138e651-54c5-4fd4-8f40-3364f4e9dfe2",
      type: "solidColor",
      supportedFirmwareVersions: ["1.0.1"],
      name: {
        de: "Einfarbig",
        en: "Solid",
      },
      defaults: [],
      adjustments: [],
    },
    {
      id: "c7097a60-faa9-4928-a531-0a8ecbc115d9",
      type: "multipleColors",
      supportedFirmwareVersions: ["1.0.1"],
      name: {
        de: "Zufällig",
        en: "Random",
      },
      defaults: [
        {
          type: "color",
          value: "red",
        },
        {
          type: "color",
          value: "orange",
        },
        {
          type: "color",
          value: "blue",
        },
      ],
      adjustments: [],
    },
    {
      id: "b42c665a-c2ab-4029-9162-2280caae3274",
      type: "multipleColors",
      supportedFirmwareVersions: ["1.0.1"],
      name: {
        de: "Regenbogen",
        en: "Rainbow",
      },
      defaults: [],
      adjustments: [
        {
          type: "slider",
          name: {
            de: "Schnelligkeit des Modus",
            en: "Speed of the mode",
          },
        },
      ],
    },
  ],
  motorModes: [
    {
      type: "motor",
      name: {
        de: "Hin und her",
        en: "Back and forth",
      },
      defaults: [],
      adjustments: [
        {
          type: "slider",
          name: {
            de: "Schnelligkeit von hin und her",
            en: "Speed of the back and forth",
          },
        },
      ],
    },
  ],
  animationsIn: [
    {
      supportedFirmwareVersions: ["1.0.1"],
      name: {
        de: "Aufblendung",
        en: "Fade in",
      },
      adjustments: [
        {
          type: "slider",
          name: {
            de: "Dauer",
            en: "Duration",
          },
        },
      ],
    },
  ],
  animationsOut: [
    {
      supportedFirmwareVersions: ["1.0.1"],
      name: {
        de: "Ausblenden",
        en: "Fade out",
      },
      adjustments: [
        {
          type: "slider",
          name: {
            de: "Dauer",
            en: "Duration",
          },
        },
      ],
    },
  ],
};

export const DevDeviceId = "1f21a12a-0bec-4336-99bb-df3f9fc9f537";

// this data is transmitted from the device to the user app
const devDevices = [
  {
    id: "1f21a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
    displayName: "Turtle",
    deviceModel: "Aurora",
    firmware: {
      version: "1.0.1",
      lastUpdated: "11.07.2023 um 20:33 Uhr",
    },
    selectedScene: null,
    /*scenes: [
      {
        id: "2f21a12a-0bec-4336-99bb-df3f9fc9f537",
        name: "Szene 1",
        actions: [],
      },
      {
        id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
        name: "Szene 2",
        actions: [],
      },
    ],*/
  },
  {
    id: "5b331a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
    displayName: "Elona",
    deviceModel: "Aurora",
    firmware: {
      version: "1.0.1",
      lastUpdated: "11.07.2023 um 20:33 Uhr",
    },
    selectedScene: null,
    //scenes: [],
  },
];

const devDeviceScenes = [
  {
    deviceId: "",
    scenes: [
      {
        id: "",
        name: "",
      },
    ],
  },
];

const devDeviceSceneActions = [
  {
    sceneId: "",
    actions: [
      {
        id: "",
        modeId: "",
      },
    ],
  },
];

export function NewInitialDeviceScene(deviceId) {
  return {
    deviceId: deviceId,
    scenes: [],
  };
}

export function NewInitialDeviceSceneAction(sceneId) {
  return {
    sceneId: sceneId,
    actions: [],
  };
}

export function NewEmptyDeviceScene(name) {
  return {
    id: GetUuid(),
    name: name,
  };
}

export function NewAction(actionType) {
  return {
    id: GetUuid(),
    type: actionType, // layers, ambilight, motor
    modeId: "",
  };
}

export function GetDevice(devices) {
  return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
}

export function GetDeviceSceneAction(sceneActions, sceneId, actionId) {
  return sceneActions
    .find((s) => s.sceneId === sceneId)
    .actions.find((a) => a.id === actionId);
}

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

export const AppSelectedUserDevice = createRef();
AppSelectedUserDevice.current = { id: "", routeName: "" };

export const AppContext = createContext(appContextPreview);

export function AppProvider({ children }) {
  const [appLanguage, setAppLanguage] = useState("de");
  const [appColorScheme, setAppColorScheme] = useState("light");
  const [appTheme, setAppTheme] = useState(DarkAppTheme);
  const [isUserExpertModeEnabled, setIsUserExpertModeEnabled] = useState(false);
  const [devices, setDevices] = useState(devDevices);
  const [deviceScenes, setDeviceScenes] = useState([]);
  const [deviceSceneActions, setDeviceSceneActions] = useState([]);
  const [deviceFirmwareModes, setDeviceFirmwareModes] = useState(
    devDevicesFirmwareModes
  );
  const [userColorSwatchesFavorites, setUserColorSwatchesFavorites] = useState(
    []
  );
  const { i18n } = useTranslation();

  // TODO: only while development
  const [isUserDeveloperModeEnabled, setIsUserDeveloperModeEnabled] =
    useState(false);

  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);
  };

  const saveUserColorSwatchesFavorites = async (value) => {
    StoreData("userColorSwatchesFavorites", value);
    setUserColorSwatchesFavorites(value);
  };

  return (
    <AppContext.Provider
      value={{
        appLanguage: appLanguage,
        setAppLanguage: saveAppLanguage,
        appColorScheme: appColorScheme,
        setAppColorScheme: saveAppColorScheme,
        appTheme: appTheme,
        isUserExpertModeEnabled: isUserExpertModeEnabled,
        setIsUserExpertModeEnabled: saveUserExpertMode,
        devices: devices,
        setDevices: setDevices,
        deviceScenes: deviceScenes,
        setDeviceScenes: setDeviceScenes,
        deviceSceneActions: deviceSceneActions,
        setDeviceSceneActions: setDeviceSceneActions,
        deviceFirmwareModes: deviceFirmwareModes,
        setDeviceFirmwareModes: setDeviceFirmwareModes,
        userColorSwatchesFavorites: userColorSwatchesFavorites,
        setUserColorSwatchesFavorites: saveUserColorSwatchesFavorites,
        isUserDeveloperModeEnabled: isUserDeveloperModeEnabled,
        setUserIsDeveloperModeEnabled: saveUserDeveloperMode,
      }}
    >
      {children}
    </AppContext.Provider>
  );
}

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

export function VibrateShort() {
  Vibration.vibrate(50);
}

export function ModalContainer({ children }) {
  return (
    <View style={AppStyles.modal}>
      <View>{children}</View>
    </View>
  );
}