Untitled

import React, { useState, useEffect } from 'react';
import { FormInput, FormDate, FormRadio, FormSelect } from "../../../../Globals";
import {
  BASE_OPTIONS,
  BASE_RULES,
  CONTRACTION_DURATION_OPTIONS,
  KETUBAN_OPTIONS,
  MOLASE_OPTIONS,
  PEMBUKAAN_OPTIONS,
  PENURUNAN_OPTIONS
} from './constant';
import { Form, Tooltip } from 'antd';
import './style.scss';
import validator from './validator';
import moment from "moment";
import { handleDisabledTimeByDate } from '../mixins';

const FormInitial = ({
  listNurse = [],
  isInitialFormDisabled = false,
  formInitialPartograf,
  registrationDate,
}) => {

  const {
    MAX_VALUE,
    MIN_DATE_VALIDATOR,
    MIN_VALUE,
    DECIMAL_VALIDATOR,
    MIN_VALUE_VALIDATOR,
    TIME_VALIDATOR,
    MAX_DECIMAL_VALIDATOR,
    MAX_LENGTH_VALIDATOR,
  } = validator;

  const [toggleStateForm, setToggleStateForm] = useState({
    ketubanPecah: false,
    datangDenganMules: false,
    adaKontraksi: false
  });
  const checkInDate = Form.useWatch('checkInDate', formInitialPartograf);
  const waterBreakingDate = Form.useWatch('ketubanPecahDate', formInitialPartograf);
  const contractionsDate = Form.useWatch('contractionDate', formInitialPartograf);
  const faseActivesDate = Form.useWatch('faseActiveDate', formInitialPartograf);
  const totalOxytocinValue = Form.useWatch('totalOxytocin', formInitialPartograf);
  const totalTetesValue = Form.useWatch('totalTetes', formInitialPartograf);
  const obatCairanIVVal = Form.useWatch('obatCairanIV', formInitialPartograf);
  const proteinValue = Form.useWatch('protein', formInitialPartograf);
  const asetonValue = Form.useWatch('aseton', formInitialPartograf);
  const volumeUrinValue = Form.useWatch('volumeUrin', formInitialPartograf);

  useEffect(() => {
    const handleSetToggleByResponseApi = () => {
      const ketubanPecah = formInitialPartograf.getFieldValue('ketubanPecah');
      const datangDenganMules = formInitialPartograf.getFieldValue('datangDenganMules');
      const adaKontraksi = formInitialPartograf.getFieldValue('adaKontraksi');

      setToggleStateForm({
        ketubanPecah: ketubanPecah === 'true' ? false : true,
        datangDenganMules: datangDenganMules === 'true' ? false : true,
        adaKontraksi: adaKontraksi === 'true' ? false : true
      })
    };
    handleSetToggleByResponseApi();
  }, [formInitialPartograf])


  const handleToggleOnFormChanged = (e) => {
    const { name } = e.target;
    const formStateByName = formInitialPartograf.getFieldValue(name);
    if (name === 'ketubanPecah') handleSetFieldValueByName({ fieldsName: 'ketubanPecahDate,ketubanPecahTime', formStateByName });
    if (name === 'datangDenganMules') handleSetFieldValueByName({ fieldsName: 'contractionDate,contractionTime', formStateByName });
    if (name === 'adaKontraksi') handleSetFieldValueByName({ fieldsName: 'jumlahKontraksi,durasiKontraksi', formStateByName });

    setToggleStateForm(prevState => ({
      ...prevState,
      [name]: formStateByName === 'true' ? false : true
    }))
  };

  const handleSetFieldValueByName = ({ fieldsName, value }) => {
    if (value !== 'true') {
      fieldsName.split(',').forEach((fieldName) => {
        formInitialPartograf.setFieldValue(fieldName, null)
      })
    }
  };

  const renderTopForm = () => {
    return (
      <div className='base__form__wrapper'>
        <div>
          <FormInput
            rules={[BASE_RULES, DECIMAL_VALIDATOR, MIN_VALUE_VALIDATOR(1)]}
            type="number"
            label="Gravida (G)"
            name="gravida"
            placeholder="Gravida"
            disabled={isInitialFormDisabled}
            min={1}
          />
          <FormInput
            rules={[BASE_RULES, DECIMAL_VALIDATOR]}
            type="number"
            label="Para (P)"
            name="para"
            placeholder="Para"
            disabled={isInitialFormDisabled}
          />
          <FormInput
            rules={[BASE_RULES, DECIMAL_VALIDATOR]}
            type="number"
            label="Abortus (A)"
            name="abortus"
            placeholder="Abortus"
            disabled={isInitialFormDisabled}
          />
          <FormDate
            form
            placeholder="Pilih Tanggal Masuk"
            label="Tanggal Masuk"
            name={["checkInDate"]}
            rules={[BASE_RULES, MIN_DATE_VALIDATOR(registrationDate)]}
            placement="topLeft"
            disabled={isInitialFormDisabled}
            disabledDate={(current) => {
              const start = moment(registrationDate);
              return current < start || current > moment();
            }}
          />
          <FormDate
            type="time"
            form
            format="HH:mm"
            placeholder="Pilih Jam Masuk"
            label="Jam Masuk"
            name={["checkInTime"]}
            rules={[BASE_RULES, TIME_VALIDATOR(registrationDate)]}
            disabled={isInitialFormDisabled}
            disabledTime={() => handleDisabledTimeByDate(checkInDate)}
          />
        </div>
        <div className='grid__form__wrapper'>
          <div className='form__aside'>
            <FormRadio
              label="Ketuban Pecah?"
              name="ketubanPecah"
              rules={[BASE_RULES]}
              options={BASE_OPTIONS}
              disabled={isInitialFormDisabled}
            />
            <hr className='hr__partograph' />
            <div className='flex__wrapper'>
              <FormDate
                form
                placeholder="Pilih Tanggal Ketuban Pecah"
                label="Tanggal Ketuban Pecah"
                name={["ketubanPecahDate"]}
                placement="topLeft"
                rules={[{ ...BASE_RULES, required: !toggleStateForm.ketubanPecah }]}
                disabled={isInitialFormDisabled || toggleStateForm.ketubanPecah}
                disabledDate={(current) => {
                  const start = moment(checkInDate).add(-29, 'days');
                  return current < start || current > moment();
                }}
              />
              <FormDate
                type="time"
                form
                format="HH:mm"
                placeholder="Pilih Jam Ketuban Pecah"
                label="Jam Ketuban Pecah"
                name={["ketubanPecahTime"]}
                disabled={isInitialFormDisabled || toggleStateForm.ketubanPecah}
                disabledTime={() => handleDisabledTimeByDate(waterBreakingDate)}
                rules={[{ ...BASE_RULES, required: !toggleStateForm.ketubanPecah }]}
              />
            </div>
          </div>
          <div className='form__aside'>
            <FormRadio
              label="Datang dengan Mules?"
              name="datangDenganMules"
              rules={[BASE_RULES]}
              options={BASE_OPTIONS}
              disabled={isInitialFormDisabled}
            />
            <hr className='hr__partograph' />
            <div className='flex__wrapper'>
              <FormDate
                form
                placeholder="Pilih Tanggal Mules"
                label="Tanggal Mules"
                name={["contractionDate"]}
                placement="topLeft"
                rules={[{ ...BASE_RULES, required: !toggleStateForm.datangDenganMules }]}
                disabled={isInitialFormDisabled || toggleStateForm.datangDenganMules}
                disabledDate={(current) => {
                  const start = moment(checkInDate).add(-29, 'days');
                  return current < start || current > moment();
                }}
              />
              <FormDate
                type="time"
                form
                format="HH:mm"
                placeholder="Pilih Jam Mules"
                label="Jam Mules"
                name={["contractionTime"]}
                rules={[{ ...BASE_RULES, required: !toggleStateForm.datangDenganMules }]}
                disabled={isInitialFormDisabled || toggleStateForm.datangDenganMules}
                disabledTime={() => handleDisabledTimeByDate(contractionsDate)}
              />
            </div>
          </div>
        </div>
        <aside className='form__aside__wrapper'>
          <div className='flex__wrapper'>
            <FormInput
              rules={[BASE_RULES, MAX_VALUE(180), MIN_VALUE(50), DECIMAL_VALIDATOR]}
              type="number"
              label="Denyut Nadi"
              name="denyut"
              placeholder="Denyut Nadi"
              suffix="/mnt"
              disabled={isInitialFormDisabled}
            />
            <FormInput
              rules={[BASE_RULES, MAX_VALUE(50), MIN_VALUE(10), MAX_DECIMAL_VALIDATOR]}
              type="number"
              label="Suhu Tubuh"
              name="suhuTubuh"
              placeholder="Suhu Tubuh"
              suffix="ºC"
              disabled={isInitialFormDisabled}
            />
          </div>
        </aside>
      </div>
    )
  }

  const renderMiddleForm = () => {
    return (
      <>
        <div className='flex__wrapper'>
          <div className='grid__form__wrapper'>
            <div className='form__aside' style={{ height: 'max-content' }}>
              <p className='base__label__required'>Tekanan Darah</p>
              <hr className='hr__partograph' />
              <div className='flex__wrapper'>
                <FormInput
                  rules={[BASE_RULES, MIN_VALUE(50), MAX_VALUE(200), DECIMAL_VALIDATOR]}
                  type="number"
                  label="Sistol"
                  name="sistol"
                  placeholder="Tekanan Darah Sistol"
                  suffix="mmHg"
                  disabled={isInitialFormDisabled}
                />
                <FormInput
                  rules={[BASE_RULES, MIN_VALUE(50), MAX_VALUE(200), DECIMAL_VALIDATOR]}
                  type="number"
                  label="Diastol"
                  name="diastol"
                  placeholder="Tekanan Darah Diasto"
                  suffix="mmHg"
                  disabled={isInitialFormDisabled}
                />
              </div>
            </div>
            <div className='right__form__aside'>
              <div>
                <p className='base__label__required'>Ada Kontraksi?</p>
                <FormRadio
                  name="adaKontraksi"
                  rules={[BASE_RULES]}
                  options={BASE_OPTIONS}
                  disabled={isInitialFormDisabled}
                />
              </div>
              <div>
                <p className='base__label__required'>Kontraksi Per 10 menit</p>
                <hr className='hr__partograph' />
                <div className='flex__wrapper'>
                  <FormInput
                    type="number"
                    label="Jumlah Kontraksi"
                    name="jumlahKontraksi"
                    placeholder="Jumlah Kontraksi"
<<<<<<< Updated upstream
                    rules={[{ ...BASE_RULES, required: !toggleStateForm.adaKontraksi, ...{ ...!toggleStateForm.adaKontraksi && DECIMAL_VALIDATOR } }]}
                    disabled={isInitialFormDisabled || toggleStateForm.adaKontraksi}
=======
                    rules={[{ ...BASE_RULES, required: !toggleStateForm.adaKontraksi }, ...[!toggleStateForm.adaKontraksi && MIN_VALUE(1)], ...[!toggleStateForm.adaKontraksi && DECIMAL_VALIDATOR]]}
                    disabled={isInitialFormDisabled || isDetail || toggleStateForm.adaKontraksi}
>>>>>>> Stashed changes
                  />
                  <div>
                    <p className='select__label'>Kontraksi Per 10 menit</p>
                    <FormSelect
                      name={["durasiKontraksi"]}
                      placeholder="Pilih Durasi per Kontraksi"
                      options={CONTRACTION_DURATION_OPTIONS}
                      rules={[{ ...BASE_RULES, required: !toggleStateForm.adaKontraksi }]}
                      disabled={isInitialFormDisabled || toggleStateForm.adaKontraksi} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className='grid__form__content'>
          <FormInput
            rules={[BASE_RULES, MIN_VALUE(80), MAX_VALUE(200), DECIMAL_VALIDATOR]}
            type="number"
            label="Detak Jantung Janin (DJJ)"
            name="denyutJanin"
            placeholder="Detak Jantung Janin"
            suffix="/mnt"
            disabled={isInitialFormDisabled}
          />
          <div className='flex__wrapper'>
            <FormDate
              form
              placeholder="Pilih Tanggal Fase Aktif"
              label="Tanggal Fase Aktif"
              name={["faseActiveDate"]}
              rules={[BASE_RULES]}
              placement="topLeft"
              disabled={isInitialFormDisabled}
              disabledDate={(current) => {
                const start = moment(checkInDate);
                return current < start || current > moment();
              }}
            />
            <Tooltip placement="bottom" title="Masukkan Tanggal Pemeriksaan Fase Aktif saat di Rumah Sakit.">
              <data className='tooltip__partograf' value="Masukkan Tanggal Pemeriksaan Fase Aktif saat di Rumah Sakit.">i</data>
            </Tooltip>
          </div>
          <div className='flex__wrapper'>
            <FormDate
              type="time"
              form
              format="HH:mm"
              placeholder="Pilih Jam Fase Aktif"
              label="Jam Fase Aktif"
              name={["faseActiveTime"]}
              rules={[BASE_RULES]}
              disabled={isInitialFormDisabled}
              disabledTime={() => handleDisabledTimeByDate(faseActivesDate)}
            />
            <Tooltip placement="bottom" title="Masukkan Jam Pemeriksaan Fase Aktif saat di Rumah Sakit.">
              <data className='tooltip__partograf' value="Masukkan Jam Pemeriksaan Fase Aktif saat di Rumah Sakit.">i</data>
            </Tooltip>
          </div>
          <div>
            <p className='select__label'>Pembukaan</p>
            <FormSelect
              rules={[BASE_RULES]}
              name={["pembukaanOpt"]}
              placeholder="Pilih Pembukaan"
              options={PEMBUKAAN_OPTIONS}
              disabled={isInitialFormDisabled}
            />
          </div>
          <div>
            <p className='select__label'>Penurunan Kepala</p>
            <FormSelect
              rules={[BASE_RULES]}
              name={["penurunanOpt"]}
              placeholder="Pilih Penurunan Kepala"
              options={PENURUNAN_OPTIONS}
              disabled={isInitialFormDisabled}
            />
          </div>
          <div>
            <p className='select__label'>Air Ketuban</p>
            <FormSelect
              rules={[BASE_RULES]}
              name={["ketubanOpt"]}
              placeholder="Pilih Air Ketuban"
              options={KETUBAN_OPTIONS}
              disabled={isInitialFormDisabled}
            />
          </div>
          <div>
            <p className='select__label'>Penyusupan (Molase)</p>
            <FormSelect
              rules={[BASE_RULES]}
              name={["penyusupanOpt"]}
              placeholder="Pilih Penyusupan"
              options={MOLASE_OPTIONS}
              disabled={isInitialFormDisabled}
            />
          </div>
        </div>
      </>
    )
  }

  const renderBottomForm = () => {
    return (
      <div className='flex__column__wrapper'>
        <div className='form__aside'>
          <p className='base__label__partograf'>Pemberian Oxytocin</p>
          <hr className='hr__partograph' />
          <div className='flex__wrapper'>
            <FormInput
              rules={[...[totalOxytocinValue && MIN_VALUE(1)], ...[totalOxytocinValue && MAX_VALUE(100)], ...[totalOxytocinValue && DECIMAL_VALIDATOR]]}
              type="number"
              label="Jumlah"
              name="totalOxytocin"
              placeholder="Jumlah Pembelian"
              suffix="Unit/L"
              disabled={isInitialFormDisabled}
            />
            <FormInput
              rules={[...[totalTetesValue && MIN_VALUE(1)], ...[totalTetesValue && MAX_VALUE(100)], ...[totalTetesValue && DECIMAL_VALIDATOR]]}
              type="number"
              label="Tetes per Menit"
              name="totalTetes"
              placeholder="Jumlah Tetes"
              suffix="tetes/mnt"
              disabled={isInitialFormDisabled}
            />
          </div>
        </div>
        <div className='form__aside__wrapper'>
          <div className='flex__wrapper'>
            <FormInput
              rules={[...[obatCairanIVVal && MAX_LENGTH_VALIDATOR(20)]]}
              label="Pemberian Obat dan Cairan IV Lainnya"
              name="obatCairanIV"
              placeholder="Pemberian Obat dan Cairan"
              disabled={isInitialFormDisabled}
            />
          </div>
        </div>
        <div className='form__aside'>
          <p className='base__label__partograf'>Pengeluaran Urin</p>
          <hr className='hr__partograph' />
          <div className='flex__wrapper'>
            <FormInput
              rules={[...[proteinValue && MAX_LENGTH_VALIDATOR(20)]]}
              label="Protein"
              name="protein"
              placeholder="Protein"
              disabled={isInitialFormDisabled}
            />
            <FormInput
              rules={[...[asetonValue && MAX_LENGTH_VALIDATOR(20)]]}
              label="Aseton"
              name="aseton"
              placeholder="Aseton"
              disabled={isInitialFormDisabled}
            />
            <FormInput
              rules={[...[volumeUrinValue && MAX_LENGTH_VALIDATOR(20)]]}
              label="Volume"
              type="number"
              name="volumeUrin"
              placeholder="Volume"
              disabled={isInitialFormDisabled}
            />
          </div>
        </div>
        <div className='bottom__form__wrapper'>
          <FormSelect
            showSearch
            allowClear
            label="Perawat Yang Bertugas"
            placeholder="Pilih Perawat"
            name="nurse"
            filterOption={(input, option) =>
              (option?.label ?? "")
                .toLowerCase()
                .includes(input.toLowerCase())
            }
            options={listNurse?.map((n) => {
              return {
                value: n?.tm_nurse.id,
                label: n?.tm_nurse.name,
              };
            })}
            rules={[{ ...BASE_RULES, message: "Perawat tidak boleh kosong" }]}
            disabled={isInitialFormDisabled}
          />
        </div>
      </div>
    )
  };

  return (
    <Form
      name="formInitialPartograf"
      form={formInitialPartograf}
      className='initial__form__container'
      layout="vertical"
      scrollToFirstError={true}
      onChange={(e) => handleToggleOnFormChanged(e)}
    >
      {renderTopForm()}
      {renderMiddleForm()}
      {renderBottomForm()}
    </Form>
  )
};

export default FormInitial;