import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import NavbarBack from 'components/NavbarBack';
import Navigation from 'components/Navigation';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Image,
  RefreshControl,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
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';

interface SettingsProps {}

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

const Settings = (props: SettingsProps) => {
  const [refreshing, setRefreshing] = React.useState(false);
  const { i18n, t } = useTranslation();
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const selectedLang = languages.find(l => l.code === i18n.language);

  const handlechangeLanguage = (lang: string) => {
    changeLanguage(lang);
  };

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

  const refreshControl = React.useMemo(
    () => <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
    [refreshing, onRefresh],
  );

  const contentContainerStyle = React.useMemo(
    () => ({ paddingBottom: 10 }),
    [],
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <NavbarBack title={t('Sozlamalar')} />
        <ScrollView
          keyboardShouldPersistTaps="handled"
          refreshControl={refreshControl}
          contentContainerStyle={contentContainerStyle}
        >
          <View style={{ marginTop: 10, width: '95%', margin: 'auto' }}>
            <Text style={{ fontSize: 20, fontWeight: '500' }}>
              {t('select_language')}
            </Text>
            {languages.map(item => (
              <TouchableOpacity
                style={[
                  styles.card,
                  {
                    backgroundColor:
                      selectedLang?.code === item.code
                        ? '#28A7E81A'
                        : '#FFFFFF',
                    shadowColor:
                      selectedLang?.code === item.code
                        ? '#28A7E81A'
                        : '#F3FAFF',
                  },
                ]}
                key={item.code}
                onPress={() => handlechangeLanguage(item.code)}
              >
                <View
                  style={{
                    flexDirection: 'row',
                    gap: 10,
                    alignItems: 'center',
                  }}
                >
                  <Image
                    source={item.Icon}
                    style={{ width: 30, height: 30, objectFit: 'contain' }}
                  />
                  <Text
                    style={[
                      styles.label,
                      {
                        color:
                          selectedLang?.code === item.code
                            ? '#28A7E8'
                            : '#000000',
                      },
                    ]}
                  >
                    {item.label}
                  </Text>
                </View>
                <View
                  style={[
                    styles.check,
                    {
                      backgroundColor:
                        selectedLang?.code === item.code
                          ? '#28A7E8'
                          : '#FFFFFF',
                      borderColor:
                        selectedLang?.code === item.code
                          ? '#28A7E8'
                          : '#383838',
                    },
                  ]}
                >
                  {selectedLang?.code === item.code && (
                    <Check width={20} height={20} color="#ffff" />
                  )}
                </View>
              </TouchableOpacity>
            ))}
          </View>
          {/* <TouchableOpacity
            style={[styles.card, { width: '95%', margin: 'auto' }]}
            onPress={() => navigation.navigate('SettingsLock')}
          >
            <Text>Parol o'rnatish</Text>
            <ArrowRightUnderline width={20} height={20} color="#383838" />
          </TouchableOpacity> */}
        </ScrollView>
        <Navigation />
      </View>
    </SafeAreaView>
  );
};

export default Settings;

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