import { useState } from "react";
import { animated, useSpring } from "@react-spring/web";
import WBSpacer from "../../../../components/WBSpacer";
import { previewModal } from "../../../../App.js";
import { generatePreview } from "../../../../features/navigation/components/TOD.Navigation.js";

const GoingLive = () => {
  const [checked, setChecked] = useState(false);

  const styles = useSpring({
    from: {
      opacity: 0,
      y: 24,
    },
    to: {
      opacity: 1,
      y: 0,
    },
  });

  const goLive = () => {
    previewModal.value = { ...previewModal.value, visible: true, error: null };
    wp.apiFetch({
      path: "/wb-onboarding/v1/create-website",
      method: "POST",
      data: {
        is_preview: false,
        onboard_data: window.wb_onboard_options,
      },
    })
      .then((response) => {
        window.location.reload();
      })
      .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.",
        };
      });
  };

  return (
    <animated.div style={styles} className="form-container">
      <h1 style={{ textAlign: "center" }}>
        Your MioCommerce website is ready to go live!
      </h1>
      <p style={{ textAlign: "center", margin: "auto", fontSize: 18 }}>
        Be sure to have completed all sections in the previous steps!
      </p>
      <p style={{ textAlign: "center", margin: "auto", fontSize: 18 }}>
        <a href="#" onClick={() => generatePreview()}>
          Preview entire website
        </a>{" "}
        to review all content on your website.
      </p>
      <WBSpacer height={60} />
      <div style={{ maxWidth: 1000 }}>
        <h2>Ready to go live? Then:</h2>
        <ol>
          <li style={{ marginBottom: 10 }}>
            Tick the checkbox below to confirm go-live.
          </li>
          <li style={{ marginBottom: 10 }}>
            Click the <strong>Go Live Button</strong> below. Your website will
            instantly go-live on the MioCommerce provided domain (url):{" "}
            <span style={{ fontWeight: 600 }}>
              {window.wb_onboard_options.temp_site_url}
            </span>
            .
            <ul>
              <li style={{ marginTop: 10 }}>
                NOTE: You can transfer the website to your own company domain,
                instructions will be provided as soon as you go-live (following
                this step).
              </li>
            </ul>
          </li>
        </ol>
      </div>
      <WBSpacer height={60} />
      <label className="tod-checkbox-wrap" style={{ fontSize: 14 }}>
        <input
          type="checkbox"
          defaultChecked={checked}
          onChange={() => setChecked((state) => !state)}
        />
        <span></span> I have completed and reviewed my website content and am
        ready to go live. (Once you go live all future updates will be possible
        via your designated Wordpress account which will be auto-generated and
        provided to you in the next step).
      </label>
      <WBSpacer height={60} />
      <a
        className={`wb-form-btn go-live ${checked ? "active" : ""}`}
        style={{
          color: "white",
          background: "var(--color-darkest)",
        }}
        onClick={() => {
          if (checked) goLive();
        }}
      >
        Go live!
        <svg
          style={{ width: "20px" }}
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path d="M512 32L64 32C46.3 32 32 46.3 32 64l0 192 512 0 0-192c0-17.7-14.3-32-32-32zm64 224l0 32 0 64c0 35.3-28.7 64-64 64l-149.1 0 10.7 64 58.4 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-72 0-144 0-72 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l58.4 0 10.7-64L64 416c-35.3 0-64-28.7-64-64l0-64 0-32L0 64C0 28.7 28.7 0 64 0L512 0c35.3 0 64 28.7 64 64l0 192zM32 288l0 64c0 17.7 14.3 32 32 32l167.7 0c.2 0 .4 0 .6 0l111.5 0c.2 0 .4 0 .6 0L512 384c17.7 0 32-14.3 32-32l0-64L32 288zM234.9 480l106.2 0-10.7-64-84.9 0-10.7 64z" />
        </svg>
      </a>
      <WBSpacer height={60} />
      <div style={{ maxWidth: 1000 }}>
        <h3>What happens once you go live?</h3>
        <ol>
          <li style={{ marginBottom: 10 }}>
            find simple instructions on how to transfer the website onto your
            own domain (optional).
          </li>
          <li style={{ marginBottom: 10 }}>
            access your designated Wordpress website account and credentials,
            which can be used for all future changes/update made to your
            website.
          </li>
          <li>
            find easy steps to create and install your advanced booking pages on
            your website.
          </li>
          <li>
            install a bunch of FREE MioCommerce Plug-ins to convert your website
            into an e-commerce store for services.
          </li>
        </ol>
      </div>
      <WBSpacer height={60} />
    </animated.div>
  );
};
export default GoingLive;
