import BottomSheetModal from "@/components/common/BottomSheetModal"; // adjust path

import { StyleSheet, Text, TouchableOpacity } from "react-native";
import { useEffect, useState } from "react";
import { getLanguage, setLanguage } from "@/services/i18n";
import { useTranslation } from "react-i18next";
import { useSnackbar } from "@/contexts/Snackbar";

interface CustomerSupportProps {
  visible: boolean;
  onClose: () => void;
}

export default function LanguageModal({
  visible,
  onClose,
}: CustomerSupportProps) {
  const [selectedLang, setSelectedLang] = useState<"en" | "hi">("en");

  useEffect(() => {
    (async () => {
      const lang = await getLanguage();
      setSelectedLang(lang === "hi" ? "hi" : "en");
    })();
  }, []);

  const { showSnackbar } = useSnackbar();

  const { t } = useTranslation();

  const handleLanguagePress = (lang: "en" | "hi") => {
    setSelectedLang(lang);
    setLanguage(lang);
    onClose();
    showSnackbar(`${t("profile.lang-changed")}`, "success");
  };
  return (
    <BottomSheetModal
      visible={visible}
      onClose={onClose}
      heading={t("profile.select-language")}
    >
      <TouchableOpacity
        style={[
          styles.languageCard,
          selectedLang === "en" && styles.selectedCard,
        ]}
        onPress={() => handleLanguagePress("en")}
        disabled={selectedLang === "en"}
      >
        <Text style={styles.languageText}>English</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[
          styles.languageCard,
          selectedLang === "hi" && styles.selectedCard,
        ]}
        onPress={() => handleLanguagePress("hi")}
        disabled={selectedLang === "hi"}
      >
        <Text style={styles.languageText}>हिन्दी</Text>
      </TouchableOpacity>
    </BottomSheetModal>
  );
}

const styles = StyleSheet.create({
  languageText: {
    fontSize: 16,
    color: "#2f465e",
  },
  selectedCard: {
    borderColor: "#009E71",
  },
  languageCard: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#d8dde7",
    borderRadius: 4,
    padding: 16,
    marginBottom: 16,
    justifyContent: "center",
  },
  row: {
    flexDirection: "row",
    gap: 16,
    justifyContent: "space-between",
  },
  secondaryButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 8,
    paddingHorizontal: 16,
    height: 40,
    borderRadius: 4,
    backgroundColor: "#F3F5F8",
    borderWidth: 1,
    borderColor: "#D8DDE7",
    width: 156,
    gap: 8,
  },
  fullButton: {
    width: "100%",
  },
  buttonText: {
    fontSize: 14,
    fontWeight: "500",
    color: "#252A34",
  },
});