import React, { useState } 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 WBDrawer from "../../../../../components/WBDrawer";
import "./MissionVisionSection.css";

const MissionVisionSection = ({ pageName }) => {
  const [drawerOpen, setDrawerOpen] = useState(false);

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

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

  const addColumn = () => {
    const section = getSection();
    const columns = [...(section.data.columns || [])];
    columns.push({
      title: "",
      text: "",
    });
    handleChange("columns", columns);
  };

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

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

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

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

  return (
    <div
      className={`mission-vision-section ${
        !section.data.isVisible ? "section-hidden" : ""
      }`}
    >
      <div className="form-layout-header">
        <div className="form-layout-title">
          <h3>Mission, Vision and Values Section</h3>
          <p>
            This section gives more background information about your business.
          </p>
        </div>
        <div className="form-layout-options">
          <TODToggle
            value={section.data.isVisible ?? true}
            onChange={(value) => handleChange("isVisible", value)}
            label="Show this section?"
          />
          <button
            className={`edit-section-button ${
              !section.data.isVisible ? "disabled" : ""
            }`}
            onClick={() => setDrawerOpen(true)}
            disabled={!section.data.isVisible}
          >
            Edit Section
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z"></path>
            </svg>
          </button>
        </div>
      </div>

      <WBDrawer
        isOpen={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        title="Edit Mission & Vision Section"
        image="https://themesondemand.b-cdn.net/MioCommerce/Olympus/mission-section-preview.png"
        previewSlug="/about-us"
        previewTitle="Preview About Us Page"
      >
        <div className="form-layout-content">
          <div className="form-group">
            <label className="form-label">Section Title</label>
            <input
              type="text"
              className="form-input"
              value={section.data.title || ""}
              onChange={(e) => handleChange("title", e.target.value)}
              placeholder="Enter section title"
            />
          </div>

          <div className="form-group">
            <label className="form-label">
              Information Items About Your Business
            </label>
            <WBRepeater addClick={addColumn}>
              {(section.data.columns || []).map((column, index) => (
                <WBRepeaterRow
                  key={index}
                  index={index}
                  onDelete={deleteColumn}
                  onChangeOrder={reorderColumn}
                  title={column.title || `Column ${index + 1}`}
                  isAccordion={true}
                >
                  <div className="form-group">
                    <div className="form-group-row">
                      <label className="form-label">Title</label>
                      <input
                        className="form-input"
                        type="text"
                        value={column.title}
                        onChange={(e) =>
                          updateColumn(index, "title", e.target.value)
                        }
                        placeholder="Enter column title"
                      />
                    </div>
                    <div className="form-group-row">
                      <label className="form-label">Description</label>
                      <textarea
                        className="form-input"
                        value={column.text}
                        onChange={(e) =>
                          updateColumn(index, "text", e.target.value)
                        }
                        placeholder="Enter column text"
                      />
                    </div>
                  </div>
                </WBRepeaterRow>
              ))}
            </WBRepeater>
          </div>
        </div>
      </WBDrawer>
    </div>
  );
};

MissionVisionSection.type = "mission-vision";

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

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

export default MissionVisionSection;
