import AppText from 'components/AppText';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import RU from 'screens/../../assets/bootsplash/RU.png';
import UZ from 'screens/../../assets/bootsplash/UZ.png';
import ArrowDown from 'svg/ArrowDown';
import ArrowUp from 'svg/ArrowUp';
import { changeLanguage } from 'utils/changeLanguage';

const languages = [
  { code: 'uz', label: 'Uzb', Icon: UZ },
  { code: 'ru', label: 'Ru', Icon: RU },
];

const LanguageSelector = () => {
  const { i18n } = useTranslation();
  const [dropdownVisible, setDropdownVisible] = useState(false);

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

  const handleLanguageChange = async (lang: string) => {
    await changeLanguage(lang);
    setDropdownVisible(false);
  };

  return (
    <View style={styles.wrapper}>
      <TouchableOpacity
        style={styles.selector}
        onPress={() => setDropdownVisible(prev => !prev)}
      >
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            gap: 10,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Image
            source={selectedLang?.Icon}
            style={{ width: 20, height: 20, objectFit: 'contain' }}
          />
          <AppText style={styles.selectedText}>{selectedLang?.label}</AppText>
        </View>
        {dropdownVisible ? (
          <ArrowUp color={'#555'} width={20} height={20} />
        ) : (
          <ArrowDown color={'#555'} width={20} height={20} />
        )}
      </TouchableOpacity>

      {dropdownVisible && (
        <View style={styles.dropdown}>
          {languages.map(item => (
            <TouchableOpacity
              key={item.code}
              style={styles.dropdownItem}
              onPress={() => handleLanguageChange(item.code)}
            >
              <Image
                source={item.Icon}
                style={{ width: 25, height: 25, objectFit: 'contain' }}
              />
              <AppText style={styles.dropdownItemText}>{item.label}</AppText>
            </TouchableOpacity>
          ))}
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    alignSelf: 'flex-end',
    margin: 10,
    width: 160,
  },
  selector: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 10,
    backgroundColor: '#fff',
    flexDirection: 'row',
    gap: 10,
    alignItems: 'center',
    justifyContent: 'space-between',
    alignSelf: 'flex-end',
  },
  selectedText: {
    fontSize: 14,
    color: '#333',
  },
  dropdown: {
    position: 'absolute',
    top: 45,
    right: 0,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    backgroundColor: '#fff',
    zIndex: 999,
    width: 110,
  },
  dropdownItem: {
    paddingVertical: 5,
    paddingHorizontal: 5,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  dropdownItemText: {
    fontSize: 14,
    color: '#333',
  },
});

export default LanguageSelector;
