//@ts-nocheck
import React, { useRef } from 'react';
import { observer } from 'mobx-react-lite';
import {
  Platform,
  ScrollView,
  TouchableOpacity,
  View,
  StyleSheet,
  TextInput,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  Back2Icon,
  StepIcon,
  NextIcon,
  Line2Icon,
  WarningIcon,
} from '../../assets/icons';
import { MText } from '../../components/MText';
import { Formik } from 'formik';
import digitalLendingStore from './store';
import { formatMoney } from '../../utils';
import { useNavigation } from '@react-navigation/native';
import QuickSubmitStore from '../quick-submit/store';
import FullSubmitStore from '../full-submit/store';

const EnumIncomeType = [
  {
    id: 1,
    name: 'Tiền mặt',
  },
  {
    id: 5,
    name: 'Chuyển khoản',
  },
];

const EnumCompanyInsurance = [
  {
    id: true,
    name: 'Có mua',
  },
  {
    id: false,
    name: 'Không mua',
  },
];

export const Step3 = observer(function Step3() {
  const navigation = useNavigation();
  const ref = useRef(null);

  const onSubmit = (values) => {
    digitalLendingStore.body = {
      ...digitalLendingStore.body,
      jobId: values?.job ? values?.job?.id : null,
      jobDescriptionId: values?.jobDescription
        ? values?.jobDescription?.id
        : null,
      description: values?.description,
      totalIncome: Number(String(values?.totalIncome).replaceAll(',', '')),
      imcomeType: values?.incomeType,
      companyName: values?.companyName,
      companyProvinceId: values?.companyProvinceId?.id,
      companyDistrictId: values?.companyDistrictId?.id,
      companyWardId: values?.companyWardId?.id,
      companyAddress: values?.companyAddress,
      companyInsurance: values?.companyInsurance,
    };
  };
  return (
    <View style={{ flex: 1 }}>
      <ScrollView style={{ paddingHorizontal: 12 }}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingVertical: 16,
          }}
        >
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ fontWeight: 'bold', color: '#FF8E4F' }}>01</MText>
          </View>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>02</MText>
          </View>

          <LinearGradient
            colors={['#FF8E4F', '#EF592E']}
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <MText style={{ fontWeight: 'bold', color: 'white' }}>03</MText>
          </LinearGradient>
          <Line2Icon />
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: 'white',
              shadowOffset: {
                width: 2,
                height: 1,
              },
              ...Platform.select({
                ios: {
                  shadowColor: 'rgba(0, 0, 0, 0.10)',
                  shadowOpacity: 0.2,
                },
                android: {
                  elevation: 10,
                },
              }),
            }}
          >
            <MText style={{ fontWeight: 'bold', color: '#333333' }}>04</MText>
          </View>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: 'white',
              shadowOffset: {
                width: 2,
                height: 1,
              },
              ...Platform.select({
                ios: {
                  shadowColor: 'rgba(0, 0, 0, 0.10)',
                  shadowOpacity: 0.2,
                },
                android: {
                  elevation: 10,
                },
              }),
            }}
          >
            <MText style={{ fontWeight: 'bold', color: '#333333' }}>05</MText>
          </View>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: 'white',
              shadowOffset: {
                width: 2,
                height: 1,
              },
              ...Platform.select({
                ios: {
                  shadowColor: 'rgba(0, 0, 0, 0.10)',
                  shadowOpacity: 0.2,
                },
                android: {
                  elevation: 10,
                },
              }),
            }}
          >
            <MText style={{ fontWeight: 'bold', color: '#333333' }}>06</MText>
          </View>
        </View>
        <MText style={{ fontWeight: 'bold' }}>THÔNG TIN VIỆC LÀM</MText>
        <View
          style={{ height: 1, backgroundColor: '#BDBDBD', marginTop: 16 }}
        />
        <View
          style={{
            backgroundColor: '#EB5757',
            flexDirection: 'row',
            padding: 8,
            alignItems: 'center',
            borderRadius: 8,
            marginTop: 12,
          }}
        >
          <WarningIcon />
          <MText style={{ flex: 1, color: 'white', marginLeft: 8 }}>
            Kiểm tra lại thông tin của bạn, nếu chưa chính xác hoặc đã cũ, hãy
            cập nhật lại thông tin mới nhất nhé!
          </MText>
        </View>
        <Formik
          onSubmit={onSubmit}
          innerRef={ref}
          initialValues={{
            job: digitalLendingStore?.data?.jobId
              ? {
                  id: digitalLendingStore?.data?.jobId,
                  name: digitalLendingStore?.data?.jobName,
                }
              : null,
            jobDescription: digitalLendingStore?.data?.jobDescriptionId
              ? {
                  id: digitalLendingStore?.data?.jobDescriptionId,
                  name: digitalLendingStore?.data?.jobDescriptionName,
                }
              : null,
            description: digitalLendingStore?.data?.description,
            totalIncome: digitalLendingStore?.data?.totalIncome,
            companyInsurance: digitalLendingStore?.data?.companyInsurance,
            companyName: digitalLendingStore?.data?.companyName,
            companyAddress: digitalLendingStore?.data?.companyAddress,
            incomeType: digitalLendingStore?.data?.imcomeType,
            companyProvinceId: digitalLendingStore?.data?.companyProvinceId
              ? {
                  id: digitalLendingStore?.data?.companyProvinceId,
                  name: digitalLendingStore?.data?.companyProvinceName,
                }
              : null,
            companyDistrictId: digitalLendingStore?.data?.companyDistrictId
              ? {
                  id: digitalLendingStore?.data?.companyDistrictId,
                  name: digitalLendingStore?.data?.companyDistrictName,
                }
              : null,
            companyWardId: digitalLendingStore?.data?.companyWardId
              ? {
                  id: digitalLendingStore?.data?.companyWardId,
                  name: digitalLendingStore?.data?.companyWardName,
                }
              : null,
          }}
        >
          {({ values, handleSubmit, handleChange, setFieldValue }) => (
            <View style={{ marginTop: 16 }}>
              <View>
                <MText style={{ color: '#8A8A8A' }}>Nghề nghiệp</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Nghề nghiệp',
                      data: digitalLendingStore.listJob,
                      callback: (item) => {
                        setFieldValue('job', item);
                        setFieldValue('jobDescription', null);
                        digitalLendingStore.getJobDescription(item?.id);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.job ? values.job?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />

              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Ngành nghề</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Ngành nghề',
                      data: digitalLendingStore.listJobDescription,
                      callback: (item) => {
                        setFieldValue('jobDescription', item);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.jobDescription ? values.jobDescription?.name : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Vị trí</MText>
                <TextInput
                  onChangeText={handleChange('description')}
                  value={values?.description}
                  style={{
                    flex: 1,
                    color: '#33333',
                    height: 30,
                    marginVertical: 0,
                    flex: 1,
                    padding: 0,
                  }}
                />
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Thu nhập</MText>
                <TextInput
                  keyboardType="number-pad"
                  value={formatMoney(values.totalIncome)}
                  onChangeText={handleChange('totalIncome')}
                  style={{
                    flex: 1,
                    color: '#33333',
                    height: 30,
                    marginVertical: 0,
                    flex: 1,
                    padding: 0,
                  }}
                />
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Hình thức nhận lương</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Hình thức nhận lương',
                      data: EnumIncomeType,
                      callback: (item) => {
                        setFieldValue('incomeType', item.id);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.incomeType === 1 ? 'Tiền mặt' : 'Chuyển khoản'}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Tham gia BHXH</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Tham gia BHXH',
                      data: EnumCompanyInsurance,
                      callback: (item) => {
                        setFieldValue('companyInsurance', item.id);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.companyInsurance ? 'Có mua' : 'Không mua'}
                  </MText>
                </TouchableOpacity>
              </View>

              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Tên công ty</MText>
                <TextInput
                  value={values.companyName}
                  onChangeText={handleChange('companyName')}
                  style={{
                    flex: 1,
                    color: '#33333',
                    height: 30,
                    marginVertical: 0,
                    flex: 1,
                    padding: 0,
                  }}
                />
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Chọn thành phố</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn thành phố',
                      data: digitalLendingStore.listProvinces,
                      callback: (item) => {
                        digitalLendingStore.getDistricts(item?.id, (data) => {
                          digitalLendingStore.companyListDistricts = data;
                        });
                        setFieldValue('companyProvinceId', item);
                        setFieldValue('companyDistrictId', null);
                        setFieldValue('companyWardId', null);
                        digitalLendingStore.companyListWards = [];
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.companyProvinceId
                      ? values.companyProvinceId?.name
                      : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Chọn Quận/Huyện</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Quận/Huyện',
                      data: digitalLendingStore.companyListDistricts,
                      callback: (item) => {
                        digitalLendingStore.getWards(item?.id, (data) => {
                          digitalLendingStore.companyListWards = data;
                        });
                        setFieldValue('companyDistrictId', item);
                        setFieldValue('companyWardId', null);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.companyDistrictId
                      ? values.companyDistrictId?.name
                      : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Chọn Phường/Xã</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Phường/Xã',
                      data: digitalLendingStore.companyListWards,
                      callback: (item) => {
                        setFieldValue('companyWardId', item);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.companyWardId ? values.companyWardId?.name : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Địa chỉ chi tiết</MText>
                <TextInput
                  value={values.companyAddress}
                  onChangeText={handleChange('companyAddress')}
                  style={{
                    flex: 1,
                    color: '#33333',
                    height: 30,
                    marginVertical: 0,
                    flex: 1,
                    padding: 0,
                  }}
                />
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
            </View>
          )}
        </Formik>
      </ScrollView>
      <View
        style={{
          backgroundColor: 'white',
          shadowOffset: {
            width: 2,
            height: 1,
          },
          ...Platform.select({
            ios: {
              shadowColor: 'rgba(0, 0, 0, 0.10)',
              shadowOpacity: 0.2,
            },
            android: {
              elevation: 10,
            },
          }),
          paddingTop: 12,
          paddingHorizontal: 12,
          flexDirection: 'row',
          paddingBottom: 16,
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <TouchableOpacity
          onPress={() => (digitalLendingStore.step = 2)}
          style={{
            paddingHorizontal: 12,
            paddingVertical: 8,
            borderRadius: 40,
            flexDirection: 'row',
            alignItems: 'center',
            borderWidth: 1,
            borderColor: '#FF8E4F',
          }}
        >
          <Back2Icon />
          <MText
            style={{
              marginLeft: 5,
              color: '#FF8E4F',
              fontSize: 16,
              fontWeight: '500',
            }}
          >
            Trở lại
          </MText>
        </TouchableOpacity>
        <StepIcon />
        <TouchableOpacity
          onPress={() => {
            digitalLendingStore.step = 4;
            ref.current.handleSubmit();
          }}
        >
          <LinearGradient
            colors={['#FF8E4F', '#EF592E']}
            style={{
              paddingHorizontal: 12,
              paddingVertical: 8,
              borderRadius: 40,
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            <MText
              style={{
                color: 'white',
                fontSize: 16,
                fontWeight: '500',
                marginRight: 5,
              }}
            >
              Tiếp tục
            </MText>
            <NextIcon />
          </LinearGradient>
        </TouchableOpacity>
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  input: {},
});
