//@ts-nocheck
import { useNavigation } from '@react-navigation/native';
import { observer, Observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { SafeAreaView, TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { IconBack } from '../../assets/icons';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { color } from '../../theme';
import { commonStyles } from '../CommonStyles';
import FullSubmitStore from './store';
import { UpdateDocument } from './update-document';
import { UpdateInfo } from './update-info';
import MHeader from '../../components/MHeader';

export const FullSubmit = observer(function FullSubmit(props: any) {
  const navigation = useNavigation();
  const [tab, setTab] = useState(1);
  const loan = props?.route.params?.loan;

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <MHeader
        title="Hoàn thiện hồ sơ"
        onBack={() => {
          if (tab === 2) {
            setTab(1);
          } else {
            navigation.goBack();
          }
        }}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            flexDirection: 'row',
            borderWidth: 1,
            borderColor: '#EF4123',
            borderRadius: 30,
            marginHorizontal: 16,
            marginTop: 16,
            marginBottom: 16,
          }}
        >
          <View style={{ flex: 1 }}>
            <LinearGradient
              colors={
                FullSubmitStore.tab === 1
                  ? ['#FF7A00', '#EF4123']
                  : ['#FFFFFF', '#FFFFFF']
              }
              style={{
                alignItems: 'center',
                borderRadius: 30,
                paddingVertical: 10,
              }}
            >
              <MText
                style={{
                  color: FullSubmitStore.tab === 1 ? '#FFFFFF' : '#333333',
                }}
              >
                1. Cập nhật thông tin
              </MText>
            </LinearGradient>
          </View>
          <View
            style={{
              flex: 1,
            }}
          >
            <LinearGradient
              colors={
                FullSubmitStore.tab === 2
                  ? ['#FF7A00', '#EF4123']
                  : ['#FFFFFF', '#FFFFFF']
              }
              style={{
                alignItems: 'center',
                borderRadius: 30,
                paddingVertical: 10,
              }}
            >
              <MText
                style={{
                  color: FullSubmitStore.tab === 2 ? '#FFFFFF' : '#333333',
                }}
              >
                2. Upload chứng từ
              </MText>
            </LinearGradient>
          </View>
        </View>
        <Observer>
          {() => (
            <View style={{ flex: 1 }}>
              {tab === 1 ? (
                <UpdateInfo loan={loan} callback={(value) => setTab(value)} />
              ) : (
                <UpdateDocument loan={loan} />
              )}
            </View>
          )}
        </Observer>
      </SafeAreaView>
    </View>
  );
});
