// AccordionForm.js
import React, { useState } from 'react';
import { Formik, FieldArray, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  items: Yup.array().of(
    Yup.object().shape({
      title: Yup.string().required('Title is required'),
      content: Yup.string().required('Content is required'),
    })
  ),
});

const initialValues = {
  items: [{ title: '', content: '' }],
};

const AccordionForm = () => {
  const [expandedIndex, setExpandedIndex] = useState(null);

  const handleToggleAccordion = (index) => {
    setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
  };

  return (
    <div>
      <h1>Accordion Form</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {({ values }) => (
          <form>
            <FieldArray name="items">
              {({ push, remove }) => (
                <>
                  {values.items.map((_, index) => (
                    <div key={index}>
                      <div
                        style={{
                          border: '1px solid #ccc',
                          padding: '10px',
                          marginBottom: '10px',
                        }}
                      >
                        <div
                          style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                          }}
                          onClick={() => handleToggleAccordion(index)}
                        >
                          <h3>Accordion {index + 1}</h3>
                          <button type="button" onClick={() => remove(index)}>
                            Remove
                          </button>
                        </div>
                        {expandedIndex === index && (
                          <div>
                            <div>
                              <label htmlFor={`items.${index}.title`}>Title</label>
                              <Field name={`items.${index}.title`} />
                              <ErrorMessage name={`items.${index}.title`} component="div" />
                            </div>
                            <div>
                              <label htmlFor={`items.${index}.content`}>Content</label>
                              <Field name={`items.${index}.content`} />
                              <ErrorMessage name={`items.${index}.content`} component="div" />
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                  <button type="button" onClick={() => push({ title: '', content: '' })}>
                    Add Accordion
                  </button>
                </>
              )}
            </FieldArray>
            <button type="submit">Submit</button>
          </form>
        )}
      </Formik>
    </div>
  );
};

export default AccordionForm;