import React, { useState } from "react";
import {
  formData,
  formulaireUtils,
} from "../../../../../features/context/TOD.FormulaireData";
import TODToggle from "../../../../../components/inputs/toggle/TOD.Toggle";
import ThemeSelect from "../../../../../components/inputs/theme-select/TOD.ThemeSelect";
import TODTextArea from "../../../../../components/inputs/TOD.TextArea";
import WBDrawer from "../../../../../components/WBDrawer";
import "./WhyChooseSection.css";

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

  const themes = [
    {
      id: "ace",
      name: "Ace",
      imageUrl:
        "https://themesondemand.b-cdn.net/MioCommerce/Olympus/styles/ace/why-choose-us.png",
    },
    {
      id: "accelerator",
      name: "Accelerator",
      imageUrl:
        "https://themesondemand.b-cdn.net/MioCommerce/Olympus/styles/accelerator/why-choose-us.png",
    },
    {
      id: "triumph",
      name: "Triumph",
      imageUrl:
        "https://themesondemand.b-cdn.net/MioCommerce/Olympus/styles/triumph/why-choose-us.png",
    },
  ];

  const getPreviewImage = () => {
    const theme = window.wb_onboard_options.theme || "ace";
    if (theme == "ace")
      return "https://themesondemand.b-cdn.net/MioCommerce/Olympus/styles/ace/why-choose-us.png";
    if (theme == "accelerator")
      return "https://themesondemand.b-cdn.net/MioCommerce/Olympus/styles/accelerator/why-choose-us.png";
    if (theme == "triumph")
      return "https://themesondemand.b-cdn.net/MioCommerce/Olympus/styles/triumph/why-choose-us.png";
  };

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

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

  return (
    <div
      className={`why-choose-section ${
        !section.data.isVisible ? "section-hidden" : ""
      }`}
    >
      <div className="form-layout-header">
        <div className="form-layout-title">
          <h3>Why Choose Us Section</h3>
          <p>
            This section explains why customers should choose your business and
            links to your services page.
          </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 Why Choose Us Section"
        image={getPreviewImage()}
        previewSlug="/"
        previewTitle="Preview Home Page"
      >
        <div className="form-layout-content">
          <div className="form-group style-options">
            <ThemeSelect
              isOpen={isStyleOpen}
              onToggle={() => setIsStyleOpen(!isStyleOpen)}
              themes={themes}
              selectedTheme={section.data.selectedStyle}
              onThemeSelect={(themeId) =>
                handleChange("selectedStyle", themeId)
              }
            />
          </div>

          <div className="form-group">
            <label className="form-label">Section Title</label>
            <input
              type="text"
              className="form-input"
              value={section.data.sectionTitle || ""}
              onChange={(e) => handleChange("sectionTitle", e.target.value)}
              placeholder="Enter section title"
            />
          </div>

          <div className="form-group">
            <label className="form-label">Section Content</label>
            <TODTextArea
              value={section.data.sectionContent || ""}
              onChange={(e) => handleChange("sectionContent", e.target.value)}
              placeholder="Enter section content"
            />
          </div>
        </div>
      </WBDrawer>
    </div>
  );
};

WhyChooseSection.type = "why-choose-section";

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

  if (!exists) {
    const id = formData.value[pageName].sections.length;
    formData.value[pageName].sections.push({
      id: id,
      type: WhyChooseSection.type,
      data: {
        isVisible: true,
        sectionTitle: "",
        sectionContent: "",
        selectedStyle: window.wb_onboard_options.theme || "ace",
      },
    });
    formData.value[pageName].sectionsOrder.push(id);
  }
};

export default WhyChooseSection;
