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

import { useEffect, useState } from 'react';
import { useHistory, useParams, useLocation } from 'react-router-dom';
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 { WeatherContainer } from '../basis/flight/plan/WeatherContainer';
import { ErrorModal } from '../../components/modal/ErrorModal';
import {
  initFlight,
  initFlightBas
} from '../../modules/basis/flight/models/basisFlightModel';
import {
  Row,
  Col,
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Alert,
  FormGroup,
  Label,
  Input
} from 'reactstrap';
import { AREA_DETAIL_INIT } from '../../modules/basis/flight/actions/basisFlightAction';
import { useDispatch } from 'react-redux';

export default function LaancPlanContainer({
  currentParm,
  disabledAnimation,
  setDisabledAnimation
}) {
  const dispatch = useDispatch();
  const [step, setStep] = useState(1);
  const [detailData, setDetailData] = useState(initFlightBas.initDetail);
  const [centeredModal, setCenteredModal] = useState(false);
  const [formModal, setFormModal] = useState(false);
  const [modal2, setModal2] = useState({
    isOpen: false,
    title: '',
    desc: ''
  });
  //날씨 임시 데이터
  const [wheather, setWheather] = useState([
    {
      coordList: [
        {
          lat: 37.40284040287055,
          lon: 126.68639226254697
        }
      ]
    }
  ]);

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

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

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

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

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

    switch (type) {
      case 'area':
      case 'pilot':
      case 'arcrft':
        if (name === 'fltElev' || name === 'bufferZone' || name === 'hpno') {
          const newValue = value.replace(/[^0-9]/g, '');
          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;
    }
  };

  // 스텝 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 (!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 (!detailData.fltPurpose) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '비행목적을 선택해 주세요.'
      });

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

      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) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '기체 종류를 입력해 주세요.'
      });

      return false;
    } else if (!detailData.arcrftList[0].groupNm) {
      setModal2({
        isOpen: true,
        title: '필수값 입력 오류',
        desc: '기체 신고 번호를 입력해 주세요.'
      });

      return false;
    } else {
      //api 호출 부분

      setStep(2);
    }
  };

  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}
              />
            </>
          )}
          {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}
            />
          )}
        </Modal>
        <ErrorModal modal={modal2} setModal={setModal2} />
      </div>
    </>
  );
}