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

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

  const section = formulaireUtils.getSection(pageName, FAQSectionHome.type);
  if (!section) return null;

  return (
    <div
      className={`faq-home-section ${
        !section.data.isVisible ? "section-hidden" : ""
      }`}
    >
      <div className="form-layout-header">
        <div className="form-layout-title">
          <h3>FAQ Section</h3>
          <p>Displays frequently asked questions.</p>
        </div>
        <div className="form-layout-options">
          <TODToggle
            value={section.data.isVisible ?? true}
            onChange={(value) => handleChange("isVisible", value)}
            label="Show this section?"
          />
        </div>
      </div>

      <div className="form-layout-content">
        <p>
          This section shows Frequently Asked Questions on the home page. You
          can define FAQs in a later step of this form.
        </p>
      </div>
    </div>
  );
};

FAQSectionHome.type = "faq-home-section";

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

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

export default FAQSectionHome;
