/* eslint-disable prettier/prettier */
/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable react-native/no-inline-styles */
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TouchableOpacity, Image } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import HeaderComponent from 'app/components/HeaderComponent';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { Icon } from 'react-native-elements'
import { Picker } from 'native-base';

export default function PhanQuyenTruyCap({ route, navigation }) {
  const [selectedValue, setSelectedValue] = useState("me");
  const { t, i18n } = useTranslation();
  return (
    <>
      <HeaderComponent />

      <View style={{ marginVertical: moderateScale(15), paddingHorizontal: moderateScale(10) }}>
        <View style={{ backgroundColor: '#CCEFED', padding: moderateScale(10), marginTop: moderateScale(30), position: 'relative' }}>
          <Text style={{}}>{t('benhnhan')}: <Text style={{ fontWeight: 'bold' }}>Nguyễn Văn A</Text></Text>
          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', marginTop: moderateScale(10) }}>
            <Text style={{}}>{t('moiquanhe')}:</Text>
            <Picker
              selectedValue={selectedValue}
              style={{ height: moderateScale(30) }}
              onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
              mode='dropdown'
            >
              <Picker.Item label="Tôi" value="me" />
              <Picker.Item label="Boy Friend" value="boyfriend" />
              <Picker.Item label="Girl Friend" value="girlfriend" />
            </Picker>
          </View>
          <Text style={{ fontStyle: 'italic', marginLeft: moderateScale(100), fontSize: moderateScale(13) }}>({t('vuilongchonmoiquanhe')})</Text>
          <View style={{ position: 'absolute', top: 0, right: 0 }}>
            <Icon
              name='checkmark-done-outline'
              type='ionicon'
              color='#0FA5A9'
              size={moderateScale(30)}
            />
          </View>
        </View>
        
        <View
          style={{
            paddingVertical: moderateScale(20),
            flexDirection: 'row',
            alignItems: 'center',
            flexWrap: 'wrap',
            justifyContent: 'flex-end'
          }}>
          <TouchableOpacity style={{ backgroundColor: '#0FA5A9', padding: moderateScale(10), borderRadius: 5, marginVertical: moderateScale(6), marginHorizontal: moderateScale(6) }}>
            <Text style={{ color: 'white', textAlign: 'center' }}>{t('tieptuc')}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </>
  );
}
