import React, { useState, useEffect } from 'react'
import StepOneJoblisting from './StepOneJoblisting';
import StepTwoJoblisting from './StepTwoJoblisting';
import StepThreeJoblisting from './StepThreeJoblisting';
import StepFourJoblisting from './StepFourJoblisting'
const AddJobListing = () => {
  const [currentStep, setCurrentStep] = useState(1)
  const [formData, setFormData] = useState({
    'postingOption': 'Opcja 2',
    'requireSalary': true
  })
  const nextStep = () => {
    setCurrentStep(currentStep + 1);
  };

  const prevStep = () => {
    setCurrentStep(currentStep - 1);
  };
  const removeFields = (fieldNames) => {
    // Utwórz nowy obiekt, który początkowo jest kopią formData
    let newFormData = { ...formData };

    // Iteruj przez każde pole do usunięcia
    fieldNames.forEach(fieldName => {
        // Usuń pole z nowego obiektu danych
        delete newFormData[fieldName];
    });

    // Aktualizuj stan z nowym obiektem
    setFormData(newFormData);
};

  const handleChange = input => value => {
    // Sprawdzenie, czy 'value' jest obiektem zdarzenia
    const isEvent = value && value.target;
    let newValue;

    if (isEvent) {
        // Jeśli 'value' jest obiektem zdarzenia, użyj jego właściwości 'value'
        newValue = value.target.value;
    } else {
        // W przeciwnym razie użyj 'value' bezpośrednio
        newValue = value;
    }

    setFormData({ ...formData, [input]: newValue });
    console.log('Aktualny stan formularza:', formData);
};

  const handleSubmit = () => {

  }
  useEffect(() => {
    console.log('Aktualny stan formularza:', formData);
  }, [formData]);

  switch (currentStep) {
    case 1:
      return <StepOneJoblisting
        nextStep={nextStep}
        handleChange={handleChange}
        formData={formData} />;
    case 2:
      return <StepFourJoblisting
        nextStep={nextStep}
        formData={formData}
        handleChange={handleChange} />; 
    case 3:
      return <StepTwoJoblisting
        nextStep={nextStep}
        prevStep={prevStep}
        removeFields={removeFields}
        setFormData={setFormData}
        handleChange={handleChange}
        formData={formData} />;
    case 4:
      return <StepThreeJoblisting
        prevStep={prevStep}
        handleSubmit={handleSubmit}
        formData={formData} />;
    default:
      return <div>Unknown step</div>;
  }
};


export default AddJobListing;