import AppText from 'components/AppText';
import LayoutTwo from 'components/LayoutTwo';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  ActivityIndicator,
  Image,
  RefreshControl,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import RU from 'screens/../../assets/bootsplash/RU.png';
import UZ from 'screens/../../assets/bootsplash/UZ.png';
import Check from 'svg/Check';
import { changeLanguage } from 'utils/changeLanguage';

const languages = [
  { code: 'uz', label: "O'zbek tili", Icon: UZ },
  { code: 'ru', label: 'Rus tili', Icon: RU },
];

const Settings = () => {
  const [refreshing, setRefreshing] = React.useState(false);
  const [loadingLang, setLoadingLang] = React.useState<string | null>(null);
  const { i18n, t } = useTranslation();
  const selectedLang = languages.find(l => l.code === i18n.language);

  const handlechangeLanguage = async (lang: string) => {
    try {
      setLoadingLang(lang);
      await changeLanguage(lang);
    } finally {
      setLoadingLang(null);
    }
  };

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 1500);
  }, []);

  return (
    <LayoutTwo title={t('Sozlamalar')}>
      <ScrollView
        keyboardShouldPersistTaps="handled"
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        contentContainerStyle={{ paddingBottom: 10 }}
      >
        <View style={{ marginTop: 10, width: '95%', margin: 'auto' }}>
          <AppText style={{ fontSize: 20, fontWeight: '500' }}>
            {t('select_language')}
          </AppText>
          {languages.map(item => {
            const isSelected = selectedLang?.code === item.code;
            const isLoading = loadingLang === item.code;

            return (
              <TouchableOpacity
                style={[
                  styles.card,
                  {
                    backgroundColor: isSelected ? '#28A7E81A' : '#FFFFFF',
                    shadowColor: isSelected ? '#28A7E81A' : '#F3FAFF',
                    opacity: isLoading ? 0.6 : 1,
                  },
                ]}
                key={item.code}
                onPress={() => handlechangeLanguage(item.code)}
                disabled={isLoading}
              >
                <View
                  style={{
                    flexDirection: 'row',
                    gap: 10,
                    alignItems: 'center',
                  }}
                >
                  <Image
                    source={item.Icon}
                    style={{ width: 30, height: 30, resizeMode: 'contain' }}
                  />
                  <AppText
                    style={[
                      styles.label,
                      { color: isSelected ? '#28A7E8' : '#000000' },
                    ]}
                  >
                    {item.label}
                  </AppText>
                </View>
                <View
                  style={[
                    styles.check,
                    {
                      backgroundColor: isSelected ? '#28A7E8' : '#FFFFFF',
                      borderColor: isSelected ? '#28A7E8' : '#383838',
                    },
                  ]}
                >
                  {isLoading ? (
                    <ActivityIndicator size="small" color="#28A7E8" />
                  ) : (
                    isSelected && <Check width={20} height={20} color="#fff" />
                  )}
                </View>
              </TouchableOpacity>
            );
          })}
        </View>
      </ScrollView>
    </LayoutTwo>
  );
};

export default Settings;

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#eee',
    shadowColor: '#F3FAFF',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 12,
    borderRadius: 10,
    marginTop: 10,
    alignItems: 'center',
    elevation: 1,
  },
  label: {
    fontWeight: '400',
    fontSize: 16,
  },
  check: {
    width: 24,
    height: 24,
    borderWidth: 1,
    borderColor: '#383838',
    borderRadius: 6,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
