import { Text, View } from "react-native";
import BaseBackground from "../../components/BaseBackground";
import BaseButton, { BaseButtonProps } from "../../components/BaseButton";
import { useThemeStore } from "../../stores/ThemeStore";
import { AuthService } from "../../services/AuthService";
import { router } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { SimpleHeader } from "../../components/Header";
import { THEMES } from "../../Themes";
import CustomTextInput from "../../components/CustomTextInput";
import { useState } from "react";
import { CaldavConfigService } from "../../services/CaldavConfigService";
import { useCaldavConfigStore } from "../../stores";

const handleLogout = async () => {
  await AuthService.logout();
  router.replace("/login");
};

const SettingsButton = (props: BaseButtonProps) => {
  return (
    <BaseButton
      onPress={props.onPress}
      solid={props.solid}
      className={"w-11/12"}
    >
      {props.children}
    </BaseButton>
  );
};

type CaldavTextInputProps = {
  title: string;
  value: string;
  onValueChange: (text: string) => void;
};

const CaldavTextInput = ({
  title,
  value,
  onValueChange,
}: CaldavTextInputProps) => {
  return (
    <View className="flex flex-row items-center py-1">
      <Text className="ml-4 w-24">{title}:</Text>
      <CustomTextInput
        className="flex-1 mr-4 px-3 py-2"
        text={value}
        onValueChange={onValueChange}
      />
    </View>
  );
};

const CaldavSettings = () => {
  const { theme } = useThemeStore();
  const { config, setConfig } = useCaldavConfigStore();

  const [serverUrl, setServerUrl] = useState(config?.serverUrl ?? "");
  const [username, setUsername] = useState(config?.username ?? "");
  const [password, setPassword] = useState(config?.password ?? "");

  const saveConfig = async () => {
    const saved = await CaldavConfigService.saveConfig(
      serverUrl,
      username,
      password,
    );
    setConfig(saved);
  };

  const sync = async () => {
    await CaldavConfigService.sync();
  };

  return (
    <>
      <View>
        <Text
          className="text-center text-2xl"
          style={{ color: theme.textPrimary }}
        >
          Caldav Config
        </Text>
      </View>
      <View>
        <View className="pb-1">
          <CaldavTextInput
            title="url"
            value={serverUrl}
            onValueChange={setServerUrl}
          />
          <CaldavTextInput
            title="username"
            value={username}
            onValueChange={setUsername}
          />
          <CaldavTextInput
            title="password"
            value={password}
            onValueChange={setPassword}
          />
        </View>
        <View className="flex flex-row">
          <BaseButton className="mx-4 w-1/5" solid={true} onPress={saveConfig}>
            Save
          </BaseButton>
          <BaseButton className="w-1/5" solid={true} onPress={sync}>
            Sync
          </BaseButton>
        </View>
      </View>
    </>
  );
};

const Settings = () => {
  const { theme, setTheme } = useThemeStore();

  return (
    <BaseBackground>
      <SimpleHeader text="Settings" />
      <View className="flex items-center mt-4">
        <SettingsButton onPress={handleLogout} solid={true}>
          <Ionicons name="log-out-outline" size={24} color={theme.primeFg} />{" "}
          Logout
        </SettingsButton>
        <View>
          <Text
            className="text-center text-2xl"
            style={{ color: theme.textPrimary }}
          >
            Select Theme
          </Text>
        </View>
        <SettingsButton
          solid={theme == THEMES.defaultLight}
          onPress={() => {
            setTheme("defaultLight");
          }}
        >
          Default Light
        </SettingsButton>
        <SettingsButton
          solid={theme == THEMES.defaultDark}
          onPress={() => {
            setTheme("defaultDark");
          }}
        >
          Default Dark
        </SettingsButton>
      </View>
      <CaldavSettings />
    </BaseBackground>
  );
};

export default Settings;