text: import './forms.css';
  import { useState, useEffect } from 'react';
  import { useParams } from 'react-router';
  import HeaderInput from './Inputs/HeaderInput';
  import BottomInput from './Inputs/BottomInput';
  // import { validate } from './validation';
  import { connect } from 'react-redux';
  import { StartFetch, EndFetch } from '../../actions';
  import { useNavigate } from 'react-router-dom';
  import CircularProgress from '@mui/material/CircularProgress';
  <<<<<<< HEAD
  <<<<<<< HEAD
  <<<<<<< HEAD
  import useTouchedFields from '../../hooks/useTouchedFields';
  import { axiosInstance } from '../../config';
  =======
  =======
  >>>>>>> parent of a4863ea... forms ready
  =======
  >>>>>>> parent of a4863ea... forms ready
  import axios from 'axios';
  >>>>>>> parent of a4863ea... forms ready
  const Forms = ({ startFetch, endFetch, fetchEvent, userName }) => {
    const { id } = useParams();
    const [dynamicInput, setInput] = useState({
      DynamicInput: null,
    });
    const [errors, setErrors] = useState({});
    //default inputs value
    const [category, setCategory] = useState();
    const [images, setImages] = useState({
      input1: '',
      input2: '',
      input3: '',
      input4: '',
    });
    //dynamic inputs value
  
    const [dataState, setData] = useState();
    const navigate = useNavigate();
    useEffect(() => {
      const fetchData = async () => {
        if (Object.keys(errors).length === 0 && dataState) {
          const { data } = await axios.post(
            `/posts/newPost?userId=${id}`,
            dataState
          );
          if (data === 'Succes') {
            endFetch('');
            navigate(`/myAccount/${userName}/${id}`);
          } else {
            endFetch(data);
          }
        }
        if (Object.keys(errors).length !== 0) {
          endFetch('Set your errors');
        }
      };
      fetchData();
    }, [dataState, endFetch, errors, navigate, id, userName]);
    useEffect(() => {
      setErrors({});
      const dynamicImport = async () => {
        switch (category) {
          case 'Auto':
            const { default: Auto } = await import(
              './Inputs/CategoryInputs/Auto'
            );
            setInput({ DynamicInput: Auto });
            break;
          case 'Electronic':
            const { default: Electronic } = await import(
              './Inputs/CategoryInputs/Electronic'
            );
            setInput({ DynamicInput: Electronic });
            break;
          case 'House':
            const { default: House } = await import(
              './Inputs/CategoryInputs/House'
            );
            setInput({ DynamicInput: House });
            break;
          case 'Immobility':
            const { default: Immobility } = await import(
              './Inputs/CategoryInputs/Immobility'
            );
            setInput({ DynamicInput: Immobility });
            break;
  
          case 'Kids':
            const { default: Kids } = await import(
              './Inputs/CategoryInputs/Kids'
            );
            setInput({ DynamicInput: Kids });
            break;
          case 'Parts':
            const { default: Parts } = await import(
              './Inputs/CategoryInputs/Parts'
            );
            setInput({ DynamicInput: Parts });
            break;
          case 'Pet':
            const { default: Pet } = await import('./Inputs/CategoryInputs/Pet');
            setInput({ DynamicInput: Pet });
            break;
          case 'Sport':
            const { default: Sport } = await import(
              './Inputs/CategoryInputs/Sport'
            );
            setInput({ DynamicInput: Sport });
            break;
          default:
            break;
        }
      };
  
      dynamicImport();
    }, [category]);
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      //Need validation for category
      startFetch();
      const dataForm = new FormData(e.target);
      const objData = Object.fromEntries(dataForm.entries());
      objData['category'] = category;
      objData['images'] = images;
      console.log(objData);
      // if (category) {
      //   let data = {
      //     category: category,
      //     images: images,
      //   };
  
  <<<<<<< HEAD
  <<<<<<< HEAD
  <<<<<<< HEAD
      const { data } = await axiosInstance.post(
        `/posts/newPost?userId=${id}`,
        objData
      );
      if (data === 'Succes') {
        endFetch('');
        navigate(`/myAccount/${userName}/${id}`);
      }
  =======
  =======
  >>>>>>> parent of a4863ea... forms ready
  =======
  >>>>>>> parent of a4863ea... forms ready
      //   if (ref1.current) {
      //     setErrors(validate(data, ref1.current.value));
      //     data = {
      //       ...data,
      //       price: ref1.current.value,
      //     };
      //     setData(data);
      //   } else {
      //     setErrors((prevValue) => ({ ...prevValue, price: 'price required' }));
      //   }
      // } else {
      //   setErrors((prevValue) => ({
      //     ...prevValue,
      //     categoryErr: 'category required',
      //   }));
      // }
  <<<<<<< HEAD
  <<<<<<< HEAD
  >>>>>>> parent of a4863ea... forms ready
  =======
  >>>>>>> parent of a4863ea... forms ready
  =======
  >>>>>>> parent of a4863ea... forms ready
    };
    const { DynamicInput } = dynamicInput;
    return (
      <form className="formsAdd" onSubmit={handleSubmit}>
        <HeaderInput
          setCategory={setCategory}
          images={images}
          setImages={setImages}
          errors={errors}
        />
        {DynamicInput && <DynamicInput errors={errors} />}
        <BottomInput errors={errors} />
        <button className="submitButton" type="submit">
          Send
        </button>
        <div className="fetchingData">
          {fetchEvent.fetching ? (
            <CircularProgress size="35px" />
          ) : (
            <p
              className="testErrors"
              style={
                fetchEvent.response === 'Succes'
                  ? { color: 'rgb(28, 250, 20)', textShadow: 'none' }
                  : { color: 'rgb(250, 20, 20)' }
              }
            >
              {fetchEvent.response}
            </p>
          )}
        </div>
      </form>
    );
  };
  const mapStateToProps = (state) => {
    return {
      fetchEvent: state.fetchstatus,
      userName: state.auth.name,
    };
  };
  const mapDispatchToProps = (dispatch) => {
    return {
      startFetch: () => dispatch(StartFetch()),
      endFetch: (code) => dispatch(EndFetch(code)),
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Forms);
  