import { Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { useContext, useState } from "react";
import { AppContext, AppStyles } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import MyIcon from "../../Components/Icon";
import { MyTextInputModal } from "../../Components/Modal";

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

  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 })
              }
            >
              Turtle
            </Text>
          </View>

          <TouchableOpacity onPress={() => setModalTextInputVisible(true)}>
            <MyIcon name="pencil" size={18} color={appContext.appTheme.icon} />
          </TouchableOpacity>
        </View>

        <MyTextInputModal
          isOpen={modalTextInputVisible}
          setIsOpen={setModalTextInputVisible}
          onTextInputSave={() => console.log("save")}
          modalTitle={t("screens.device.settings.deviceNameText")}
          inputTitle={t("screens.device.settings.deviceNameText")}
          inputDescription={t(
            "screens.device.settings.modalTextInputDeviceNameDescription"
          )}
        />

        <Divider />

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

        <Divider />

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

        <Divider />

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