import { Text, View } from "react-native";
import Card from "../../Components/Card";
import { useContext, useEffect, useState } from "react";
import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import { MyIconButton } from "../../Components/Button";

export default function SettingsView({ navigation }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();
  const [switchState, setSwitchState] = useState(false);

  const device = appContext.devices.find(
    (d) => d.id === AppSelectedUserDevice.current.id
  );

  useEffect(() => {
    navigation.setOptions({
      headerRight: null,
    });
  }, []);

  return (
    <>
      <Card>
        <Text
          style={[
            AppStyles.typography20,
            {
              color: appContext.appTheme.text,
              marginBottom: 10,
            },
          ]}
        >
          {t("screens.device.settings.settingsTitle")}
        </Text>

        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <View style={{ width: "80%" }}>
            <Text
              style={[
                AppStyles.typography16,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.device.settings.wifiStandByTitle")}
            </Text>
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.textSecondary },
              ]}
            >
              {t("screens.device.settings.wifiStandByDescription")}
            </Text>
          </View>
          <MySwitch
            value={switchState}
            onValueChange={(e) => setSwitchState(e)}
          />
        </View>
      </Card>

      <Card>
        <Text
          style={[
            AppStyles.typography20,
            {
              color: appContext.appTheme.text,
              marginBottom: 10,
            },
          ]}
        >
          {t("screens.device.settings.deviceInformationText")}
        </Text>

        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <View>
            <Text
              style={
                ([AppStyles.typography16], { color: appContext.appTheme.text })
              }
            >
              {t("screens.device.settings.deviceNameText")}
            </Text>
            <Text
              style={
                ([AppStyles.typography14],
                { color: appContext.appTheme.textSecondary })
              }
            >
              {device.displayName}
            </Text>
          </View>

          <MyIconButton
            onPress={() =>
              navigation.navigate("modalSettingsChangeDeviceDisplayName", {
                id: device.id,
                displayName: device.displayName,
              })
            }
            iconName="pencil"
            iconSize={18}
          />
        </View>

        <Divider />

        <Text
          style={
            ([AppStyles.typography16], { color: appContext.appTheme.text })
          }
        >
          {t("screens.device.settings.deviceModelText")}
        </Text>
        <Text
          style={
            ([AppStyles.typography14],
            { color: appContext.appTheme.textSecondary })
          }
        >
          {device.deviceModel}
        </Text>

        <Divider />

        <Text
          style={
            ([AppStyles.typography16], { color: appContext.appTheme.text })
          }
        >
          {t("screens.device.settings.deviceFirmwareVersionText")}
        </Text>
        <Text
          style={
            ([AppStyles.typography14],
            { color: appContext.appTheme.textSecondary })
          }
        >
          {device.firmware.version}
        </Text>

        <Divider />

        <Text
          style={
            ([AppStyles.typography16], { color: appContext.appTheme.text })
          }
        >
          {t("screens.device.settings.deviceLastUpdatedText")}
        </Text>
        <Text
          style={
            ([AppStyles.typography14],
            { color: appContext.appTheme.textSecondary })
          }
        >
          {device.firmware.lastUpdated}
        </Text>
      </Card>
    </>
  );
}
