import React from "react";
import {
  formData,
  formulaireUtils,
} from "../../../../../features/context/TOD.FormulaireData";
import TODToggle from "../../../../../components/inputs/toggle/TOD.Toggle";
import WBRepeater from "../../../../../components/inputs/repeater/WBRepeater";
import WBRepeaterRow from "../../../../../components/inputs/repeater/WBRepeaterRow";
import "./FAQSection.css";

const FAQSection = ({ pageName }) => {
  const handleChange = (field, value) => {
    formulaireUtils.handleChange(field, value, pageName, FAQSection.type);
  };

  const getSection = () => {
    return formulaireUtils.getSection(pageName, FAQSection.type);
  };

  const addFAQ = () => {
    const section = getSection();
    const faqs = [...(section.data.faqs || [])];
    faqs.push({
      question: "",
      answer: "",
    });
    handleChange("faqs", faqs);
  };

  const updateFAQ = (index, field, value) => {
    const section = getSection();
    const faqs = [...(section.data.faqs || [])];
    faqs[index] = {
      ...faqs[index],
      [field]: value,
    };
    handleChange("faqs", faqs);
  };

  const deleteFAQ = (index) => {
    const section = getSection();
    const faqs = section.data.faqs.filter((_, i) => i !== index);
    handleChange("faqs", faqs);
  };

  const reorderFAQ = (index, direction) => {
    const section = getSection();
    const faqs = [...section.data.faqs];
    if (direction === "up" && index > 0) {
      [faqs[index], faqs[index - 1]] = [faqs[index - 1], faqs[index]];
    } else if (direction === "down" && index < faqs.length - 1) {
      [faqs[index], faqs[index + 1]] = [faqs[index + 1], faqs[index]];
    }
    handleChange("faqs", faqs);
  };

  const section = getSection();
  if (!section) return null;

  return (
    <div
      className={`faq-section ${
        !section.data.isVisible ? "section-hidden" : ""
      }`}
    >
      <div className="form-layout-title">
        <h3>FAQs</h3>
        <p>
          Create your FAQs below as well as the answers to the questions. Your
          top 5 most frequently asked questions will appear on the bottom of
          your home page. We will also create a dedicated FAQ page which will
          include all other questions. Your websites main menu will also include
          a link to the dedicated FAQ page under the “Our Company” main menu
          item.
        </p>
      </div>

      {section.data.isVisible && (
        <div className="form-layout-content">
          <div className="form-group">
            <WBRepeater addClick={addFAQ}>
              {(section.data.faqs || []).map((faq, index) => (
                <WBRepeaterRow
                  key={index}
                  index={index}
                  onDelete={deleteFAQ}
                  onChangeOrder={reorderFAQ}
                  title={faq.question || `FAQ ${index + 1}`}
                  isAccordion={true}
                >
                  <div className="form-group">
                    <div className="form-group-row">
                      <label className="form-label">Question</label>
                      <input
                        className="form-input"
                        type="text"
                        value={faq.question}
                        onChange={(e) =>
                          updateFAQ(index, "question", e.target.value)
                        }
                        placeholder="Enter FAQ question"
                      />
                    </div>
                    <div className="form-group-row">
                      <label className="form-label">Answer</label>
                      <textarea
                        className="form-input"
                        value={faq.answer}
                        onChange={(e) =>
                          updateFAQ(index, "answer", e.target.value)
                        }
                        placeholder="Enter FAQ answer"
                      />
                    </div>
                  </div>
                </WBRepeaterRow>
              ))}
            </WBRepeater>
          </div>
        </div>
      )}
    </div>
  );
};

FAQSection.type = "faq";

FAQSection.init = (pageName) => {
  const exists = formData.value[pageName].sections.some(
    (section) => section.type === FAQSection.type
  );

  if (!exists) {
    const id = formData.value[pageName].sections.length;
    formData.value[pageName].sections.push({
      id,
      type: FAQSection.type,
      data: {
        isVisible: true,
        faqs: [],
      },
    });
    formData.value[pageName].sectionsOrder.push(id);
  }
};

export default FAQSection;
