import React, { useState } from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';

const AccordionForm = () => {
  const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded

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

  return (
    <div>
      <Formik
        initialValues={{
          items: [{ title: '', content: '' }]
        }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {({ values }) => (
          <Form>
            <FieldArray name="items">
              {({ push, remove }) => (
                <div>
                  {values.items.map((_, index) => (
                    <div key={index}>
                      <AccordionItem
                        index={index}
                        expanded={expandedIndex === index}
                        toggleAccordion={() => toggleAccordion(index)}
                        remove={() => remove(index)}
                      >
                        <div>
                          <Field name={`items.${index}.title`} placeholder="Title" />
                          <Field name={`items.${index}.content`} placeholder="Content" />
                        </div>
                      </AccordionItem>
                    </div>
                  ))}
                  <button
                    type="button"
                    onClick={() => {
                      push({ title: '', content: '' });
                      setExpandedIndex(values.items.length);
                    }}
                  >
                    Add Item
                  </button>
                </div>
              )}
            </FieldArray>
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
  return (
    <div>
      <button type="button" onClick={toggleAccordion}>
        {expanded ? '-' : '+'}
      </button>
      <button type="button" onClick={remove}>Remove</button>
      <div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
    </div>
  );
};

export default AccordionForm;