Untitled

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import {
  Form,
} from "antd";
import B2BConfig from '@/configs/B2BConfig';
import AlamatForm from "@/component/b2bForms/basic/AlamatForm";
import FileInputField from '@/component/b2bFields/FileInputField';
import FormSubtitleSection from "@/component/b2bForms/basic/FormSubtitleSection";
import InfoPJField from "@/component/b2bFields/InfoPJField";
import Api from '@/configs/Api';
import BaseConfig from '@/configs/BaseConfig';
import Helper from '@/helpers/Helper';
import Router from 'next/router'
import CustomFieldHelper from '@/helpers/CustomFieldHelper';
import InfoPerusahaanHelper from "@/helpers/b2b/InfoPerusahaanHelper";


const moment = require('moment');

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 24,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 24,
    },
  },
};

export default function FotoUsahaEntity() {
  const pageData = useSelector(state => state.b2bRegistration);
  const b2bFormRedux = useSelector(state => state.b2bForm);
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('vertical');
  const [isLoading, setisLoading] = useState(false);
  const [requiredValidation, setrequiredValidation] = useState(true);
  let initialMaritalStatus = null;

  // Set Company
  const company = B2BConfig.LIST.findItem(pageData.kind);
  company.full_name = B2BConfig.LIST.getFullStr(company.id);

  // For Edit Data
  let applicantId = null;
  let applicantB2BId = null;
  
  // check if b2bFormRedux.Applicant.ID exist
  if(Helper.getNestedObject(b2bFormRedux, "Applicant", "ID")) {
    applicantId = b2bFormRedux.Applicant.ID;
  } // endif
  if(Helper.getNestedObject(b2bFormRedux, "ApplicantB2B", "ID")) {
    applicantB2BId = b2bFormRedux.ApplicantB2B.ID;
  } // endif
  
  let formInitialValue = null;
  
  formInitialValue = {};

  // Use this Helper, to prevent all object updated using same value while updating single object.
  const defaultCustomField = () => {
    return {
      isError: false,
      files: [],
      // to store current file from API GET
      url: null
    }
  }

  let tempCustomField = {
    FileInventoryPhoto: defaultCustomField(),
    FileBusinessActivityPhoto: defaultCustomField(),
  }

  // Will have error if empty when validator active
  const requiredCustomField = [
    "FileInventoryPhoto",
    "FileBusinessActivityPhoto"
  ];
  
  
  if(Helper.getNestedObject(b2bFormRedux, "ApplicantB2B", "BusinessActivity")) {
    const fileUrlParam = {
      apiObject: b2bFormRedux.ApplicantB2B, tempCustomField: tempCustomField
    }
    console.log("tempCustomField FotoUsaha", tempCustomField);
    // set initial state
  } // endif
  
  const [customFields, setcustomFields] = useState(tempCustomField);
  
  const onCustomFieldChanged = (event, fieldName) => {
    const temporaryField        = customFields;
    temporaryField[fieldName].files = event.target.files;
    setcustomFields(temporaryField);
  }
  const onCustomFieldRemoved = (fieldName) => {
    const temporaryField        = customFields;
    temporaryField[fieldName].files = [];
    setcustomFields(temporaryField);
  }

  // reset after submit, so will not trigger on first tab click
  const resetSimpanVerifikasiTrigger = () => {
    const companyState = {...pageData,
      simpan_formulir_click_at: 0,
      kirim_verifikasi_click_at: 0,
    }
    ReduxStore.dispatch({
      type: "b2bregistration/set_data",
      payload: companyState,
    });
  }

  const hasB2BIdCheck = () => {
    if(! applicantB2BId) {
      GModal.error({
        content: "Mohon untuk mengisi Informasi Perusahaan terlebih dahulu."
      });
      resetSimpanVerifikasiTrigger();

      // Back to Info Perusahaan Tab
      const companyState = {...pageData,
        active_doctab: B2BConfig.BASIC_DOCUMENT_TABS.DTABS_INFO_PERUSAHAAN
      }

      ReduxStore.dispatch({
        type: 'b2bregistration/set_data',
        payload: companyState
      });

      return false;
    } // endif

    return true;
  }

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

  // When Kirim untuk verifikasi Clicked, do:
  useEffect(() => {
    if(onThisPageCheck(pageData) && (pageData.kirim_verifikasi_click_at) && hasB2BIdCheck()) {
      console.log("kirim_verifikasi_click_at: triggered");
      setrequiredValidation(true);
      form.submit();
    } // endif
  }, [pageData.kirim_verifikasi_click_at]);

  // When Simpan Formulir Clicked, do:
  useEffect(() => {
    if(onThisPageCheck(pageData) && pageData.simpan_formulir_click_at && hasB2BIdCheck()) {
      console.log("simpan_formulir_click_at: triggered");
      // @TODO(albert): SHOULD BE FALSE, after API FIX
      setrequiredValidation(true);
      form.submit();
    } // end if
  }, [pageData.simpan_formulir_click_at]);

  const onThisPageCheck = (pageData) => {
    const isMatchStep = pageData.step == B2BConfig.STEP_DOCS.ADVANCE;
    const isMatchActiveTab = pageData.active_doctab.title == B2BConfig.ADV_DOCUMENT_TABS.DTABS_FOTO_USAHA.title;

    if(isMatchStep && isMatchActiveTab) {
      return true;
    } // endif
    return false;
  }

  const onFinish = (values) => {
    const requestBody = values;
    const isCustomFieldValidated = validateCustomField();

    console.log('Received values of form: ', requestBody);

    if(isCustomFieldValidated) {
      doSaveFormDraft(values);
    } else {
      resetSimpanVerifikasiTrigger();
      GModal.error({
        content: "Belum dapat menyimpan Foto Usaha. Pastikan sudah meng-upload berkas yang dibutuhkan."
      });
    } // endif 
  };

  const onFinishFailed = ({ values, errorFields, outOfDate }) => {
    resetSimpanVerifikasiTrigger();
  }

  const doSaveFormDraft = async (requestBody) => {
    setisLoading(true);
    const requestFormData = new FormData();

    // `[['BUF', 11], ['MIA', 9], ...]`
    const reqBodyArray = Object.entries(requestBody);
    const customFieldArray = Object.entries(customFields);
    reqBodyArray.forEach((item) => {
      // Format Date if set
      if(moment.isMoment(item[1])) {
        item[1] = item[1].format('YYYY-MM-DD');
      } // endif

      // Ignore undefined value, keep 0 value.
      if(! item[1] && (item[1] != 0)) {
        // skip
      } else {
        requestFormData.append(item[0], item[1]);
      }
    });

    // Add customFields to formData
    customFieldArray.forEach((item) => {
      // only if has Files
      if((item[1].files.length > 0)) {
        requestFormData.append(item[0], item[1].files[0]);
      } else {
        // skip
      }
    });

    console.log("requestFormData", requestFormData);

    // console.log(postApplicantB2B);
    try {
      // if has no b2b id, create new, else put update
      let response;
      if(! applicantB2BId) {
        response = await Api.AXIOS_FORM.post(Api.APPLICANT.B2B_POST(applicantId, applicantB2BId), requestFormData);
      } else {
        response = await Api.AXIOS_FORM.put(Api.APPLICANT.B2B_PUT(applicantId, applicantB2BId), requestFormData);
      }
      ReduxStore.dispatch({
        type: 'b2bform/set_data',
        payload: {...b2bFormRedux,
          ApplicantB2B: response.data.Data
        }
      });

      GModal.info({
        content: "Foto Usaha berhasil disimpan."
      });

      setisLoading(false);

      if(pageData.kirim_verifikasi_click_at > 0) {
        Router.push('/b2b-register/verifikasi');
      } // endif

    } catch (e) {
      console.log(e);
      GModal.error({
        content: "Gagal menyimpan Foto Usaha. Cek log untuk detail."
      });
      setisLoading(false);
    }

    resetSimpanVerifikasiTrigger();
  }

  const doSendForVerification = () => {

  }

  /**
   * using param requiredValidationParam, instead of direact requiredValidationParam
   * bcz requiredValidationParam is a state, which will delay if called inside useEffect
   * this function also called inside useEffect(), so need to make sure, requiredValidationParam is not delayed
   */
  const validateCustomField = (requiredValidationParam=null) => {

    if(requiredValidationParam == null) {
      requiredValidationParam = requiredValidation;
    } // endif

    let temporaryFields = customFields;
    const validatorArray = requiredCustomField.map((item) => {
      const field = temporaryFields[item];

      if(! requiredValidationParam) {
        temporaryFields[item].isError = false;
        return true;
      }
      // If files is empty and url is empty, should error
      else if((field.files.length < 1) && (! field.url)) {
        temporaryFields[item].isError = true;
        return false;
      } else {
        temporaryFields[item].isError = false;
        return true;
      }
    });
    // temporaryFields should updated inside map() function
    setcustomFields(temporaryFields);
    console.log("validateCustomField", requiredValidationParam, customFields);

    // Validator array should not contain false 
    return (! validatorArray.includes(false));
    // Do Validation
  }

  return (
    <>
      <Form
        {...formItemLayout}
        form={form}
        layout={formLayout}
        name="register"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        initialValues={formInitialValue}
        scrollToFirstError
      >
        <FormSubtitleSection
          subtitle="Foto Usaha"
          // smallTitle={"Penanggung jawab perusahaan adalah " + company.pj}
          noMarginTop={true}
        />
        
        <FileInputField.CustomFieldSingleInput
          name="FileBusinessActivityPhoto"
          label="Foto Kantor Yang Menggambarkan Aktifitas Usaha"
          validationMsg="Foto Kantor Yang Menggambarkan Aktifitas Usaha harus di upload"
          customFields={customFields}
          setcustomFields={setcustomFields}
          exampleButton={true}
          exampleUrl="https://www.google.com/"
        />

        <FileInputField.CustomFieldSingleInput
          name="FileInventoryPhoto"
          label="Foto Inventaris"
          validationMsg="Foto Inventaris harus di upload"
          customFields={customFields}
          setcustomFields={setcustomFields}
          isOptionalField={true}
          exampleButton={true}
          exampleUrl="https://www.google.com/"
        />
        
      </Form>
    </>
  );
}