// @ts-nocheck
import { useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import { ImageStyle, TouchableOpacity, View } from 'react-native';
import { IconBack } from '../../assets/icons';
import { MText } from '../../components/MText';
import { Info } from './Info';
import { Payment } from './Payment';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const logoView: ImageStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  resizeMode: 'cover',
};

export const DetailLoan = observer(function DetailLoan(props: any) {
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();
  const [tab, setTab] = useState(1);

  return (
    <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
      <View style={{ flex: 1, marginTop: insets.top }}>
        <View
          style={{
            paddingHorizontal: 16,
            paddingVertical: 12,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 16 }}
            onPress={() => navigation.goBack()}
          >
            <IconBack onPress={() => navigation.goBack()} />
          </TouchableOpacity>
          <MText
            style={{
              fontFamily: 'BeVietnamPro-SemiBold',
              fontWeight: '600',
              fontSize: 16,
            }}
          >
            HD-{props.route?.params?.loan?.id}
          </MText>
        </View>
        <View
          style={{
            flexDirection: 'row',
            backgroundColor: '#F2F2F2',
            borderRadius: 30,
            marginHorizontal: 16,
            marginTop: 10,
          }}
        >
          <TouchableOpacity onPress={() => setTab(1)} style={{ flex: 1 }}>
            <View
              style={{
                alignItems: 'center',
                borderRadius: 30,
                paddingVertical: 10,
                borderWidth: 1,
                borderColor: tab === 1 ? '#EF4123' : '#F2F2F2',
                backgroundColor: tab === 1 ? '#FFFFFF' : '#F2F2F2',
              }}
            >
              <MText
                style={{
                  color: tab === 1 ? '#EF4123' : '#333333',
                  fontWeight: tab === 1 ? 'bold' : '400',
                }}
              >
                Thông tin đơn
              </MText>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => setTab(2)}
            style={{
              flex: 1,
            }}
          >
            <View
              style={{
                alignItems: 'center',
                borderRadius: 30,
                paddingVertical: 10,
                borderWidth: 1,
                borderColor: tab === 2 ? '#EF4123' : '#F2F2F2',
                backgroundColor: tab === 2 ? '#FFFFFF' : '#F2F2F2',
              }}
            >
              <MText
                style={{
                  color: tab === 2 ? '#EF4123' : '#333333',
                  fontWeight: tab === 2 ? 'bold' : '400',
                }}
              >
                Lịch thanh toán
              </MText>
            </View>
          </TouchableOpacity>
        </View>
        {tab === 1 ? (
          <Info loan={props?.route.params?.loan} />
        ) : (
          <Payment data={props?.route.params?.loan} />
        )}
      </View>
    </View>
  );
});
