//@ts-nocheck
import { CommonActions, useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React from 'react';
import {
  Alert,
  Image,
  ImageStyle,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import { IconLogout, IconProfile } from '../../assets/icons';
import appStore from '../../AppStore';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
import { Api } from '../../services/api';
import { commonStyles } from '../CommonStyles';
import { toJS } from 'mobx';
import { clear } from '../../utils/storage';
import { reset } from '../../utils/keychain';

const logoView: ImageStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  resizeMode: 'stretch',
};
export const Personal = observer(function Personal() {
  const navigation = useNavigation();

  const logout = async () => {
    Alert.alert('Thông báo', 'Bạn có chắc chắn muốn đăng xuất?', [
      { text: 'Bỏ qua', onPress: (value) => {} },
      {
        text: 'Đồng ý',
        onPress: async () => {
          appStore.logout();
          clear();
          reset();
          appStore.selectedTab = 'TAB1';
          Api.getInstance().changeAuth();
          navigation.dispatch(
            CommonActions.reset({
              index: 1,
              routes: [{ name: ScreenNames.Splash }],
            })
          );
        },
      },
    ]);
  };
  return (
    <View style={[commonStyles.fill, { backgroundColor: 'white' }]}>
      <Image source={require('./bg.png')} style={logoView} />
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ alignItems: 'center', marginTop: 16 }}>
          <MText style={[commonStyles.textNormalBold, { fontSize: 16 }]}>
            Thông tin tài khoản
          </MText>
        </View>
        <ScrollView style={{ flex: 1, margin: 16 }}>
          <View
            style={{
              flexDirection: 'row',
              marginBottom: 16,
              alignItems: 'center',
              borderRadius: 8,
              borderWidth: 1,
              padding: 10,
              borderColor: '#E0E0E0',
            }}
          >
            <IconProfile />
            <View style={{ marginLeft: 16 }}>
              <MText style={commonStyles.textNormalBold}>
                {toJS(appStore.info)?.fullName}
              </MText>
              <MText style={[commonStyles.textNormal, { fontSize: 12 }]}>
                {appStore.phone}
              </MText>
            </View>
          </View>
          <TouchableOpacity
            onPress={() => logout()}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              borderRadius: 8,
              borderWidth: 1,
              padding: 10,
              borderColor: '#E0E0E0',
            }}
          >
            <IconLogout width={20} height={20} fill={'#333333'} />
            <View style={{ marginLeft: 10 }}>
              <MText style={[commonStyles.textNormalBold, { fontSize: 16 }]}>
                Đăng xuất
              </MText>
              <MText style={[commonStyles.textNormal, { fontWeight: '300' }]}>
                Bạn sẽ cần đăng nhập lại nếu muốn sử dụng tiếp
              </MText>
            </View>
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    </View>
  );
});
