text: /* eslint-disable no-unused-vars */
  import React from 'react';
  import Modal from 'react-bootstrap/Modal';
  import {Form, Row, Col} from 'react-bootstrap';
  import {useFormik} from 'formik';
  import * as Yup from 'yup';
  import {useTranslation} from 'react-i18next';
  import Button from '../../../components/button/Button';
  import {printFormError} from '../../../lib/commonUiUtils';
  
  /*
   * step 객체를 다른 case로 이동/복사 할 수 있는 팝업
   */
  const UitestResultPopup = ({
      modalShow,
      handleClose,
      xhrInfo,
      scenarioData,
      saveXhrList
  }) => {
      const [t] = useTranslation();
      const formik = useFormik({
          initialValues: {
              caseId: '',
              caseName: ''
          },
          validationSchema: Yup.object({
              caseId: Yup.number().required(
                  'xhr 인터페이스를 등록할 case를 선택해주세요.'
              )
          }),
          onSubmit: (values) => {
              saveXhrList(values);
          }
      });
  
      const renderRregisterButtonShow = () => {
          if (!modalShow) return true;
  
          if (xhrInfo.list.length > 0) {
              return false;
          }
          return true;
      };
      const renderXhrInfo = () => {
          if (!modalShow) return '';
          return `${xhrInfo.list.length}건의 데이터가 있습니다.`;
      };
      const renderCaseList = () => {
          if (!modalShow) return '';
          return scenarioData.data.caseList.map((caze) => {
              return (
                  <option value={caze.id}>
                      {caze.caseName} ({caze.stepList ? caze.stepList.length : 0}
                      step)
                  </option>
              );
          });
      };
      const renderCaseName = () => {
          if (!modalShow) return '';
          if (formik.values.caseId !== '-1') {
              return '';
          }
          return (
              <Form.Group>
                  <Form.Control
                      type="text"
                      placeholder="Case 이름을 입력하세요."
                      {...formik.getFieldProps('caseName')}
                      maxLength="100"
                  />
              </Form.Group>
          );
      };
  
      return (
          <>
              <Modal
                  show={modalShow}
                  onHide={handleClose}
                  dialogClassName="modal-20w"
                  onExited={() => formik.resetForm()}
                  aria-labelledby="contained-modal-title-vcenter"
                  centered
              >
                  <Form onSubmit={formik.handleSubmit}>
                      <Modal.Header closeButton>
                          <Modal.Title id="contained-modal-title-vcenter">
                              {t('pages.scenario.caseSelect')}
                          </Modal.Title>
                      </Modal.Header>
                      <Modal.Body>
                          <Row>
                              <Col xs="12">
                                  <Form.Group>
                                      <Form.Label>{renderXhrInfo()}</Form.Label>
                                      <Form.Control
                                          as="select"
                                          {...formik.getFieldProps('caseId')}
                                      >
                                          <option value="">
                                              {t('common.text.optionNone')}
                                          </option>
                                          <option value="-1">
                                              신규 Case로 등록
                                          </option>
                                          {renderCaseList()}
                                      </Form.Control>
                                      {printFormError(formik, 'caseId')}
                                  </Form.Group>
                              </Col>
                              <Col xs="12">{renderCaseName()}</Col>
                          </Row>
                      </Modal.Body>
                      <Modal.Footer>
                          <Button
                              theme="primary"
                              type="submit"
                              disabled={renderRregisterButtonShow()}
                              // isLoading={createLoading}
                          >
                              {t('common.button.register')}
                          </Button>
                          <Button theme="default" onClick={handleClose}>
                              {t('common.button.cancle')}
                          </Button>
                      </Modal.Footer>
                  </Form>
              </Modal>
          </>
      );
  };
  
  export default UitestResultPopup;
  