import { useGlobal } from "web-utils";
import { w } from "../../../../../utils/types/general";
import { ToolbarBox } from "../../../../../utils/ui/box";
import { EDGlobal } from "../../../logic/ed-global";

export const ResponsiveToggle = () => {
  const c = useGlobal(EDGlobal, "EDITOR");
  const mode = c.mode;
  const activeModeClassName = "border-b-2 border-blue-500";

  const box = {
    mobile: {
      onClick() {
        c.mode = "mobile";
        w.isMobile = true;
        w.isDesktop = false;
        localStorage.setItem("prasi-editor-mode", "mobile");
        c.render();
      },
      className: cx(mode === "mobile" && activeModeClassName),
      content: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="15"
          fill="none"
          viewBox="0 0 15 15"
        >
          <path
            fill="currentColor"
            fillRule="evenodd"
            d="M4 2.5a.5.5 0 01.5-.5h6a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-10zM4.5 1A1.5 1.5 0 003 2.5v10A1.5 1.5 0 004.5 14h6a1.5 1.5 0 001.5-1.5v-10A1.5 1.5 0 0010.5 1h-6zM6 11.65a.35.35 0 100 .7h3a.35.35 0 100-.7H6z"
            clipRule="evenodd"
          ></path>
        </svg>
      ),
    },
    desktop: {
      onClick() {
        c.mode = "desktop";
        w.isMobile = false;
        w.isDesktop = true;
        localStorage.setItem("prasi-editor-mode", "desktop");
        c.render();
      },
      className: cx(mode === "desktop" && activeModeClassName),
      content: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="15"
          fill="none"
          viewBox="0 0 15 15"
        >
          <path
            fill="currentColor"
            fillRule="evenodd"
            d="M1 3.25A.25.25 0 011.25 3h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.25a.25.25 0 01-.25-.25v-7.5zM1.25 2C.56 2 0 2.56 0 3.25v7.5C0 11.44.56 12 1.25 12h3.823l-.243 1.299a.55.55 0 00.54.651h4.26a.55.55 0 00.54-.651L9.927 12h3.823c.69 0 1.25-.56 1.25-1.25v-7.5C15 2.56 14.44 2 13.75 2H1.25zm7.76 10H5.99l-.198 1.05h3.416L9.01 12z"
            clipRule="evenodd"
          ></path>
        </svg>
      ),
    },
  };
  const items: any[] = [];
  if (c.site.responsive === "mobile-only") {
    items.push(box.mobile);
  } else if (c.site.responsive === "desktop-only") {
    items.push(box.desktop);
  } else {
    items.push(box.mobile);
    items.push(box.desktop);
  }

  return <ToolbarBox className="flex" items={items} />;
};