text: import React from "react";
  import { InputPassword, RowInput } from "./../components/Form";
  import { BsThreeDots } from "react-icons/bs";
  import { ac_app_show_load, ac_app_hide_load } from "./../redux/actions/ac_app";
  import { useDispatch } from "react-redux";
  import { ac_set_file } from "./../redux/actions/ac_file";
  import { useNavigate } from "react-router-dom";
  
  const CreateFile = React.memo(function CreateFile() {
      const navigate = useNavigate();
      const dispatch = useDispatch();
  
      const [state, setState] = React.useState({
          fileName: {
              value: "",
              isValid: null,
          },
          password: {
              value: "",
              isValid: null,
          },
          passwordRepeat: {
              value: "",
              isValid: null,
          },
          path: {
              value: "",
              isValid: false,
          },
      });
  
      React.useEffect(() => {
          window.app.getPathWorkFolder().then((url) => {
              setState({
                  ...state,
                  path: {
                      value: url,
                      isValid: false,
                  },
              });
          });
      }, []);
  
      const { fileName, password, passwordRepeat, path } = state;
  
      const isValid = React.useMemo(() => {
          return (
              fileName.isValid === false &&
              password.isValid === false &&
              passwordRepeat.isValid === false &&
              path.isValid === false
          );
      }, [
          fileName.isValid,
          password.isValid,
          passwordRepeat.isValid,
          path.isValid,
      ]);
  
      const onInputFileName = (event) => {
          setState({
              ...state,
              fileName: {
                  ...state.fileName,
                  value: event.target.value.trim(),
              },
          });
      };
      const onBlurFileName = () => {
          let isValid = false;
          if (fileName.value.length < 2) {
              isValid = "Минимум 2 символа";
          }
          setState({
              ...state,
              fileName: {
                  ...state.fileName,
                  isValid,
              },
          });
      };
  
      const onInputPassword = (value) => {
          setState({
              ...state,
              password: {
                  ...state.password,
                  value,
              },
          });
      };
      const onBlurPassword = () => {
          let isValid = false;
          if (!password.value.length) {
              isValid = null;
          } else if (password.value.length < 5) {
              isValid = "Минимум 6 символа";
          } else if (!window.checked.password(password.value)) {
              isValid =
                  "Этот пароль входит в топ список 200 небезопасных паролей";
          } else if (
              passwordRepeat.isValid === false &&
              passwordRepeat.value !== password.value
          ) {
              isValid = "Пароли не совподают";
          }
          setState({
              ...state,
              password: {
                  ...state.password,
                  isValid,
              },
          });
      };
  
      const onInputPasswordRepeat = (value) => {
          setState({
              ...state,
              passwordRepeat: {
                  ...state.passwordRepeat,
                  value,
              },
          });
      };
      const onBlurPasswordRepeat = () => {
          let isValid = false;
          if (!passwordRepeat.value.length) {
              isValid = null;
          } else if (passwordRepeat.value.length < 5) {
              isValid = "Минимум 6 символа";
          } else if (!window.checked.password(passwordRepeat.value)) {
              isValid =
                  "Этот пароль входит в топ список 200 небезопасных паролей";
          } else if (
              password.isValid === false &&
              password.value !== passwordRepeat.value
          ) {
              isValid = "Пароли не совподают";
          }
          setState({
              ...state,
              passwordRepeat: {
                  ...state.passwordRepeat,
                  isValid,
              },
          });
      };
  
      const onInputPath = () => {
          window.modal.setPathSaveFile(path.value).then((data) => {
              setState({
                  ...state,
                  path: {
                      ...state.path,
                      value: data,
                  },
              });
          });
      };
  
      const onSubmit = (event) => {
          event.preventDefault();
          dispatch(ac_app_show_load());
          const body = {
              fileName: fileName.value,
              password: password.value,
              pathFile: path.value,
          };
          window.app
              .createFile(body)
              .then((data) => {
                  dispatch(ac_set_file(data));
                  navigate("/app/cards");
              })
              .catch((e) => {
                  console.log("error", e);
              })
              .finally(() => {
                  dispatch(ac_app_hide_load());
              });
      };
      function toBack() {
          navigate(-1);
      }
  
      return (
          <form className="form scroll" onSubmit={onSubmit}>
              <p className="form_title h3">Создание файла</p>
              <RowInput
                  type="text"
                  label="Имя файла"
                  value={fileName.value}
                  onInput={onInputFileName}
                  onBlur={onBlurFileName}
                  error={fileName.isValid}
                  placeholder="Например: документ"
              />
              <InputPassword
                  label="Пароль"
                  value={password.value}
                  onInput={onInputPassword}
                  onBlur={onBlurPassword}
                  error={password.isValid}
                  hideGenerate={true}
              />
  
              <InputPassword
                  label="Повторите пароль"
                  value={passwordRepeat.value}
                  onInput={onInputPasswordRepeat}
                  onBlur={onBlurPasswordRepeat}
                  error={passwordRepeat.isValid}
                  hideGenerate={true}
              />
  
              <div className="form_row">
                  <label>Путь сохранения файла</label>
                  <div className="form_wrapper">
                      <input
                          className="input input_file"
                          type="text"
                          value={path.value}
                          onClick={onInputPath}
                      />
                      <p className="form_row_btns">
                          <button
                              className={`btn_input`}
                              type="button"
                              onClick={onInputPath}
                          >
                              <BsThreeDots />
                          </button>
                      </p>
                  </div>
              </div>
  
              <div className="form_foot">
                  <button
                      className="btn btn-secondary"
                      type="button"
                      onClick={toBack}
                  >
                      Отмена
                  </button>
                  <button className="btn btn-primary" disabled={!isValid}>
                      Создать
                  </button>
              </div>
          </form>
      );
  });
  export default CreateFile;
  