import React from 'react'
import { TouchableOpacity, View } from 'react-native'
import Text from 'src/components/Text'
import { useDispatch } from 'react-redux'
import { appSetLanguage } from '../../redux/app/action'
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
import LinearGradient from 'react-native-linear-gradient'
import {setLanguage} from "../../api/UserApi";

const languages = [
  { code: 'th', name: 'ภาษาไทย' },
  { code: 'en', name: 'English' },
  { code: 'my', name: 'မြန်မာဘာသာ' },
  { code: 'km', name: 'ភាសាខ្មែរ' },
]

export default function ({ navigation }) {
  const dispatch = useDispatch()

  function selectLanguage (code) {
    dispatch(appSetLanguage(code))
    if(code === 'th'){
      code = 'th_TH';
    }

    setLanguage(code)
      .then(res => {
        if(res.success){
          navigation.navigate('HomeScreen')
        }else{
          navigation.navigate('HomeScreen')
        }
      })
  }

  return <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover'
  }}><BackgroundImage_RegisterForm>
    <View style={{ padding: 16, flex: 1, justifyContent: 'center' }}>
      {languages.map(lang => {
        return <TouchableOpacity
          style={{ marginBottom: 20 }}
          activeOpacity={0.8}
          onPress={() => selectLanguage(lang.code)}>
          <View style={{ alignItems: 'center', backgroundColor: 'rgba(20,94,179,0.83)', borderRadius: 5, paddingVertical: 16 }}>
            <Text style={{ fontSize: 24, color: '#ffffff' }}>{lang.name}</Text>
          </View>
        </TouchableOpacity>
      })}
    </View>
  </BackgroundImage_RegisterForm>
  </LinearGradient>
}
