import "../style/TOD.Navigation.css";
import WBPreviewModal from "../../../components/WBPreviewModal.js";
import WBSpinner from "../../../components/WBSpinner.js";
import { Step_n, previewModal } from "../../../App.js";
import { stepValidator } from "../../../features/context/TOD.FormulaireData";
import { formData } from "../../context/TOD.FormulaireData.js";

export const generatePreview = (previewSlug = "") => {
  wp.apiFetch({
    path: "/wb-onboard/v1/save-form",
    method: "POST",
    data: {
      wb_onboard_form_data: formData.value,
      step_n: Step_n.value,
    },
  }).then(() => {
    console.log("data saved successfully!");
    if (Step_n.value > 0) {
      previewModal.value = {
        ...previewModal.value,
        visible: true,
        error: null,
      };
      console.log(window.wb_onboard_options);
      wp.apiFetch({
        path: "/wb-onboarding/v1/create-website",
        method: "POST",
        data: {
          is_preview: true,
          onboard_data: window.wb_onboard_options,
        },
      })
        .then((response) => {
          previewModal.value = {
            ...previewModal.value,
            url:
              response.homepage_url +
              previewSlug +
              "?hidetoolbar=true&is_preview=true",
          };
          previewModal.value = { ...previewModal.value, isReady: true };
        })
        .catch((response) => {
          previewModal.value = {
            ...previewModal.value,
            isReady: false,
            error:
              "Sorry, there was an error generating the site. Please try again or contact us for support.",
          };
        });
    }
  });
};

const Navigation = ({ metaSteps }) => {
  const handleNext = () => {
    if (Step_n.value < metaSteps.length - 1) {
      if (stepValidator.value.fn()) {
        Step_n.value = Step_n.value + 1;
        window.scrollTo({ top: 0, behavior: "smooth" });
      }
    }
  };

  return (
    <>
      <div className="wb-form-nav">
        <div className="wb-form-nav-buttons">
          <a
            className="wb-form-btn nav-buttons"
            style={{
              opacity: Step_n.value <= 0 ? 0.2 : 1,
            }}
            onClick={() => {
              if (Step_n.value > 0) Step_n.value = Step_n.value - 1;
            }}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 320 512"
            >
              <path d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z" />
            </svg>
            Previous
          </a>

          <a
            className="wb-form-btn fill nav-buttons"
            style={{
              opacity: Step_n.value >= metaSteps.length - 1 ? 0.2 : 1,
            }}
            onClick={handleNext}
          >
            Next
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 320 512"
            >
              <path d="M305 239c9.4 9.4 9.4 24.6 0 33.9L113 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L79 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L305 239z" />
            </svg>
          </a>
        </div>

        <a
          className={`wb-form-btn preview-btn ${
            Step_n.value > 1 ? "active" : ""
          }`}
          onClick={() => {
            if (Step_n.value > 1) generatePreview();
          }}
          style={{
            backgroundColor: "var(--color-lightest)",
            color: "var(--color-darkest)",
          }}
        >
          Preview entire website
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="1em"
            viewBox="0 0 576 512"
          >
            <path d="M129.1 361.4C93.6 327.2 67.7 286.9 52.5 256c15.1-30.9 41-71.2 76.6-105.4C171.8 109.5 224.9 80 288 80s116.2 29.5 158.9 70.6c35.6 34.3 61.5 74.5 76.6 105.4c-15.1 30.9-41 71.2-76.6 105.4C404.2 402.5 351.1 432 288 432s-116.2-29.5-158.9-70.6zM288 480c158.4 0 258-149.3 288-224C546 181.3 446.4 32 288 32S30 181.3 0 256c30 74.7 129.6 224 288 224zm0-144c-44.2 0-80-35.8-80-80c0-5.4 .5-10.6 1.5-15.7L288 256l-15.7-78.5c5.1-1 10.3-1.5 15.7-1.5c44.2 0 80 35.8 80 80s-35.8 80-80 80zM160 256c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-8.6 0-17 .8-25.1 2.5c-50.3 10-90 49.5-100.3 99.7l-.1 .7c-1.6 8.1-2.5 16.5-2.5 25.1z" />
          </svg>
        </a>
      </div>
      <WBPreviewModal visible={previewModal.value.visible}>
        <div className="wb-iframe-nav-bar">
          <div
            className="wb-iframe-close-btn"
            onClick={() => {
              previewModal.value = {
                ...previewModal.value,
                visible: false,
                isReady: false,
                url: "",
                error: null,
              };
            }}
          >
            close
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
              <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
            </svg>
          </div>
        </div>
        {!previewModal.value.isReady && !previewModal.value.error && (
          <WBSpinner />
        )}
        {!previewModal.value.isReady && previewModal.value.error && (
          <div className="preview-modal-error">{previewModal.value.error}</div>
        )}
        {previewModal.value.isReady && (
          <iframe
            src={previewModal.value.url}
            title="description"
            className="wb-iframe-preview"
          ></iframe>
        )}
      </WBPreviewModal>
    </>
  );
};
export default Navigation;
