//@ts-nocheck
import React, { useEffect, useState } from 'react';
import { View, StatusBar, SafeAreaView, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import WebView from 'react-native-webview';
import { commonStyles } from '../CommonStyles';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { color } from '../../theme';
import { CheckBox, CheckBoxActive, IconBack } from '../../assets/icons';
import Pdf from 'react-native-pdf';
import LinearGradient from 'react-native-linear-gradient';
import livenessStore from '../liveness/LivenessStore';
import MHeader from '../../components/MHeader';

export const TermScreen = observer(function TermScreen(props) {
  const navigation = useNavigation();
  const [isAccept, setIsAccept] = useState(true);
  const loan = props?.route?.params;

  useEffect(() => {}, []);

  const back = () => {
    navigation.pop();
  };

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <MHeader
        title="Điều khoản"
        onBack={() => {
          back();
        }}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={{ backgroundColor: color.border }} />

          <Pdf
            source={{
              uri: 'https://cdn.tima.vn/file-pdf/20240509_DIEU_KHOAN_VA_DIEU_KIEN_TIMA.pdf',
            }}
            style={[commonStyles.fill]}
          />
          <View
            style={{
              backgroundColor: 'white',
              paddingHorizontal: 24,
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              paddingVertical: 16,
            }}
          >
            <View
              style={{
                width: '100%',
                alignItems: 'center',
                flexDirection: 'row',
              }}
            >
              <MButton
                onPress={() => {
                  setIsAccept(!isAccept);
                }}
              >
                {!isAccept ? <CheckBox /> : <CheckBoxActive />}
              </MButton>
              <MButton
                style={{ flexDirection: 'row' }}
                onPress={() => {
                  setIsAccept(!isAccept);
                }}
              >
                <MText
                  style={{
                    marginLeft: 10,
                    color: '#1D1B1B',
                    fontSize: 14,
                    fontWeight: '400',
                  }}
                >
                  Tôi đồng ý với các
                </MText>

                <MText
                  style={{
                    color: color.primary,
                    fontSize: 14,
                    fontWeight: '400',
                  }}
                >
                  {' '}
                  điều khoản
                </MText>
                <MText
                  style={{
                    marginLeft: 4,
                    color: '#1D1B1B',
                    fontSize: 14,
                    fontWeight: '400',
                  }}
                >
                  của Tima
                </MText>
              </MButton>
            </View>
            <TouchableOpacity
              style={{
                flex: 1,
                width: '100%',
              }}
              disabled={!isAccept}
              onPress={() => {
                livenessStore.confirmLicense(loan?.id, () => {
                  navigation.goBack();
                });
              }}
            >
              <LinearGradient
                style={{
                  height: 40,
                  marginVertical: 16,
                  borderRadius: 30,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                colors={
                  isAccept ? ['#FF7A00', '#EF4123'] : ['#BDBDBD', '#BDBDBD']
                }
              >
                <MText
                  style={[
                    commonStyles.textNormalBold,
                    {
                      color: true ? 'white' : '#333333',
                      textAlign: 'center',
                    },
                  ]}
                >
                  {'xác nhận'.toUpperCase()}
                </MText>
              </LinearGradient>
            </TouchableOpacity>
          </View>
        </View>
      </SafeAreaView>
    </View>
  );
});
