import React from "react";
import {
  formData,
  formulaireUtils,
} from "../../../../../features/context/TOD.FormulaireData";
import "./ServicesSection.css";

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

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

  return (
    <div
      className={`services-section ${
        !section.data.isVisible ? "section-hidden" : ""
      }`}
    >
      <div className="form-layout-header">
        <div className="form-layout-title">
          <h3>Services Section</h3>
          <p>Displays your service categories and services.</p>
        </div>
      </div>

      <div className="form-layout-content">
        <p>
          The service categories and services you specified in the last step
          will appear in this section. A short description of each service will
          be shown with links to the dedicated more information page and a page
          to book each service.
        </p>
      </div>
    </div>
  );
};

ServicesSection.type = "services-section";

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

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

export default ServicesSection;
