import { createSignal, onMount } from "solid-js";
import { featureEnableBlock } from "@/utils/storage";
import "./MainToggle.css";

export const MainToggle = (props) => {
  const [isEnabled, setIsEnabled] = createSignal(false);
  onMount(async () => {
    const getFeatureEnable = await featureEnableBlock.getValue();
    setIsEnabled(getFeatureEnable);
  });
  const toggleOnOff = () => {
    setIsEnabled(!isEnabled());
    featureEnableBlock.setValue(isEnabled());
  };
  return (
    <div>
      <button class="button-toggle" onClick={() => toggleOnOff()}>
        <img
          src="/icon/128.png"
          class={isEnabled() ? "logo logo-on" : "logo"}
          alt="let me focus logo"
        />
      </button>
      <br />
      {isEnabled() ? "[on]" : "[off]"}
    </div>
  );
};