pav-fe-kac/src/containers/laanc/LaancPlanContainer.js

import { useEffect, useState } from 'react';
import LaancStep1 from '../../views/laanc/LaancStep1'; // laanc step 1
import LaancStep2 from '../../views/laanc/LaancStep2'; // laanc step 2
import LaancStep3 from '../../views/laanc/LaacnStep3'; // laanc step 3
import moment from 'moment';
import { ErrorModal } from '../../components/modal/ErrorModal';
import { initFlightBas } from '../../modules/laanc/models/laancModels';
import { Modal } from 'reactstrap';
import {
  AREA_DETAIL_INIT,
  FLIGHT_PLAN_AREA_BUFFER_LIST
} from '../../modules/basis/flight/actions/basisFlightAction';
import { useDispatch, useSelector } from 'react-redux';
import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
import * as LaancAction from '../../modules/laanc/actions/laancActions';

export default function LaancPlanContainer({
  currentParm,
  disabledAnimation,
  setDisabledAnimation
}) {
  const dispatch = useDispatch();

  const { areaCoordList } = useSelector(state => state.flightState);
  const { user } = useSelector(state => state.authState);
  const { laancApply } = useSelector(state => state.laancState);

  const [step, setStep] = useState(1);
  const [detailData, setDetailData] = useState(initFlightBas.initDetail);
  const [finalDetailData, setFinalDetailData] = useState({});
  const [centeredModal, setCenteredModal] = useState(false);
  const [formModal, setFormModal] = useState(false);
  const [modal2, setModal2] = useState({
    isOpen: false,
    title: '',
    desc: ''
  });

  useEffect(() => {
    setDetailData({
      ...detailData,
      cstmrSno: user.cstmrSno,
      memberName: user.memberName
    });
    return () => {
      dispatch(drawTypeChangeAction(''));
    };
  }, []);

  //비행 방식 직접 입력칸 작성 시 api 호출 부분
  useEffect(() => {
    if (Object.getOwnPropertyNames(finalDetailData).length != 0) {
      dispatch(LaancAction.LAANC_FLIGHT_Approval.request(finalDetailData));
    }
  }, [finalDetailData]);

  // laanc 승인 api 200 시 step 이동
  useEffect(() => {
    if (laancApply) setStep(2);
  }, [laancApply]);

  // step 핸들러
  const handlerStep = step => {
    setStep(step);
  };

  const handlerLogout = () => {
    dispatch(Actions.logout.request());
  };

  // 날씨 핸들러
  const handlerWeather = () => {
    setFormModal(!formModal);
  };

  // 비행계획서 작성 핸들러
  const handleChange = ({ name, value, type, index, pIndex }) => {
    const arrName = `${type}List`;

    switch (type) {
      case 'coord':
        setDetailData(prevState => {
          return {
            ...prevState,
            areaList: [
              {
                ...prevState.areaList[0],
                bufferZone: 100,
                coordList: value
              }
            ]
          };
        });
        break;
      case 'area':
        if (
          name === 'fltElev' &&
          parseInt(value.replace('/^0+/', 'm', ''), 10) > 150
        ) {
          setModal2({
            isOpen: true,
            title: '고도 재설정 알림',
            desc: (
              <>
                설정하신 고도가 150m를 초과하였습니다.
                <br />
                150m 초과 시 드론원스톱을 통해 특별비행승인이 필요합니다.
              </>
            )
          });
          setDetailData(prevState => {
            const arr = [...prevState[arrName]];
            const updateData = {
              ...prevState[arrName][0],
              [name]: 0
            };
            arr[0] = updateData;
            return {
              ...prevState,
              [arrName]: arr
            };
          });
        } else if (name === 'fltMethod' && value != '직접입력') {
          setDetailData(prevState => {
            const arr = [...prevState[arrName]];
            const updateData = {
              ...prevState[arrName][0],
              [name]: value,
              selffltMethod: ''
            };
            arr[0] = updateData;
            return {
              ...prevState,
              [arrName]: arr
            };
          });
        }
        //  else if (name === 'selffltMethod') {
        //   setDetailData(prevState => {
        //     const arr = [...prevState[arrName]];
        //     const updateData = {
        //       ...prevState[arrName][0],
        //       fltMethod: value
        //     };
        //     arr[0] = updateData;
        //     return {
        //       ...prevState,
        //       [arrName]: arr
        //     };
        //   });
        // }
        else {
          setDetailData(prevState => {
            const arr = [...prevState[arrName]];
            const updateData = {
              ...prevState[arrName][0],
              [name]: value
            };
            arr[0] = updateData;
            return {
              ...prevState,
              [arrName]: arr
            };
          });
        }
        break;
      case 'pilot':
      case 'arcrft':
        if (name === 'bufferZone') {
          setDetailData(prevState => {
            const arr = [...prevState[arrName]];
            const updateData = {
              ...prevState[arrName][0],
              [name]: newValue
            };
            arr[0] = updateData;
            return {
              ...prevState,
              [arrName]: arr
            };
          });
        } else {
          setDetailData(prevState => {
            const arr = [...prevState[arrName]];
            const updateData = {
              ...prevState[arrName][0],
              [name]: value
            };
            arr[0] = updateData;
            return {
              ...prevState,
              [arrName]: arr
            };
          });
        }
        break;
      case 'plan':
      default:
        setDetailData(prevState => ({
          ...prevState,
          [name]: value
        }));
        break;
    }
  };

  console.log('>>>', detailData);

  // 스텝 1 다음 버튼 이벤트
  const handlerNext = () => {
    const reg_email =
      /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
    const check_num = /[0-9]/;
    const check_kor =
      /^[가-힣a-zA-Z0-9][^!@#$%^&*()+\=\[\]{};':"\\|,.<>\/?\s]*$/;
    // 시작일자
    const schFltStDt = moment(detailData.schFltStDt, 'YYYY-MM-DD HH:mm:ss');
    // 종료일자
    const schFltEndDt = moment(detailData.schFltEndDt, 'YYYY-MM-DD HH:mm:ss');

    const currentDate = moment(); // 현재 날짜와 시간을 가져옵니다.

    if (!detailData.commercial) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행 종류(상업/비상업)를 선택해주세요.'
      });
      return false;
    } else if (
      !schFltStDt.isAfter(currentDate) ||
      !schFltEndDt.isAfter(currentDate)
    ) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행 일자가 이미 지난 일자입니다.'
      });
      return false;
    } else if (schFltStDt.isAfter(schFltEndDt)) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행일자를 확인해주세요.'
      });
      return false;
    } else if (schFltStDt.format('A h:mm') === 'PM 11:00') {
      setModal2({
        isOpen: true,
        title: '특별 비행',
        desc: (
          <>
            야간 비행은 특별 비행에 해당됩니다.
            <br />
            특별 비행의 경우 드론원스톱을 통해서 신청해주시기 바랍니다.
          </>
        )
      });
      return false;
    } else if (schFltStDt.format('A h:mm') === 'PM 5:00') {
      setModal2({
        isOpen: true,
        title: '비행구역 및 비행일자 중복',
        desc: (
          <>
            설정하신 비행구역 및 비행시간에 이미 승인완료된 신청건이 있습니다.
            <br /> 다시 설정 부탁드립니다.
          </>
        )
      });
      return false;
    } else if (!detailData.fltPurpose) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행목적을 선택해 주세요.'
      });

      return false;
    } else if (
      !detailData.areaList[0].fltElev ||
      detailData.areaList[0].fltElev === 0
    ) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '고도를 입력해 주세요.'
      });

      return false;
    } else if (detailData.areaList[0].fltElev > 150) {
      setModal2({
        isOpen: true,
        title: '고도 재설정 알림',
        desc: (
          <>
            설정하신 고도가 150m를 초과하였습니다.
            <br />
            150m 초과 시 드론원스톱을 통해 특별비행승인이 필요합니다.
          </>
        )
      });

      return false;
    } else if (!detailData.areaList[0].bufferZone) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '반경을 입력해 주세요.'
      });

      return false;
    } else if (!detailData.areaList[0].fltMethod) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행방식를 입력해 주세요.'
      });

      return false;
    } else if (
      !detailData.arcrftList[0].arcrftTypeCd &&
      (detailData.commercial === 'COMMERCIAL' ||
        detailData.arcrftList[0].arcrftWghtCd == '9' ||
        detailData.arcrftList[0].arcrftWghtCd == '10' ||
        detailData.arcrftList[0].arcrftWghtCd == '11')
    ) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '기체 종류를 입력해 주세요.'
      });

      return false;
    } else if (
      !detailData.arcrftList[0].idntfNum &&
      (detailData.commercial === 'COMMERCIAL' ||
        detailData.arcrftList[0].arcrftWghtCd == '9' ||
        detailData.arcrftList[0].arcrftWghtCd == '10' ||
        detailData.arcrftList[0].arcrftWghtCd == '11')
    ) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '기체 신고 번호를 입력해 주세요.'
      });

      return false;
    } else {
      // 비행 방식 직접 입력칸 활성화 후 작성 시 조건문
      if (detailData.areaList[0].selffltMethod) {
        // const concatData = {};
        // concatData ={
        //   ...detailData.areaList[0],
        //   fltMethod: detailData.areaList[0].selffltMethod
        // }
        setFinalDetailData({
          ...detailData,
          areaList: [
            {
              ...detailData.areaList[0],
              fltMethod: detailData.areaList[0].selffltMethod
            }
          ]
        });
      } else {
        dispatch(LaancAction.LAANC_FLIGHT_Approval.request(detailData));
      }
    }
  };

  const handlerBufferApply = () => {
    if (areaCoordList) {
      if (areaCoordList[0].coordList.length > 0) {
        const array = [];
        const copy = { ...areaCoordList[0] };
        copy.bufferZone = detailData.areaList[0].bufferZone;
        array.push(copy);

        dispatch(FLIGHT_PLAN_AREA_BUFFER_LIST.request(array));
      }
    } else {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행 구역을 설정해 주세요.'
      });
    }
  };

  const handlerLaancClose = () => {
    setDisabledAnimation(!disabledAnimation);
    dispatch(AREA_DETAIL_INIT());
  };

  return (
    <>
      <div className='disabled-animation-modal'>
        <Modal
          isOpen={disabledAnimation}
          toggle={() => setDisabledAnimation(!disabledAnimation)}
          className='modal-dialog-centered laanc-modal'
          fade={false}
          backdrop={false}
        >
          {step === 1 && (
            <>
              <LaancStep1
                //  handlerStep={handlerStep}
                data={detailData}
                handleChange={handleChange}
                handlerNext={handlerNext}
                handlerWeather={handlerWeather}
                setDisabledAnimation={setDisabledAnimation}
                disabledAnimation={disabledAnimation}
                centeredModal={centeredModal}
                setCenteredModal={setCenteredModal}
                currentParm={currentParm}
                handlerLaancClose={handlerLaancClose}
                handlerBufferApply={handlerBufferApply}
              />
            </>
          )}
          {step === 2 && (
            <LaancStep2
              handlerStep={handlerStep}
              data={detailData}
              disabledAnimation={disabledAnimation}
              setDisabledAnimation={setDisabledAnimation}
              centeredModal={centeredModal}
              setCenteredModal={setCenteredModal}
              handlerLaancClose={handlerLaancClose}
            />
          )}
          {step === 3 && (
            <LaancStep3
              handlerStep={handlerStep}
              data={detailData}
              disabledAnimation={disabledAnimation}
              setDisabledAnimation={setDisabledAnimation}
              handlerLaancClose={handlerLaancClose}
              centeredModal={centeredModal}
              setCenteredModal={setCenteredModal}
            />
          )}
        </Modal>
        <ErrorModal modal={modal2} setModal={setModal2} />
      </div>
    </>
  );
}