import { createSignal } from "solid-js";
import { TextInput } from "../components/text-input.jsx";
import { ThemeSelection } from "../components/theme.jsx";

export const [hideMedia, setHideMedia] = createSignal(localStorage.hideMedia === "true");

const Settings = () => {
  return (
    <div class="flex w-full flex-col gap-3 px-2">
      <div class="flex items-center gap-1 font-semibold">
        <span>Settings</span>
      </div>
      <div class="flex flex-col gap-3">
        <div class="flex flex-col gap-0.5">
          <label for="plcDirectory" class="select-none">
            PLC Directory
          </label>
          <TextInput
            id="plcDirectory"
            value={localStorage.plcDirectory || "https://plc.directory"}
            onInput={(e) => {
              e.currentTarget.value.length ?
                (localStorage.plcDirectory = e.currentTarget.value)
              : localStorage.removeItem("plcDirectory");
            }}
          />
        </div>
        <ThemeSelection />
        <div class="flex justify-between">
          <div class="flex items-center gap-1">
            <input
              id="disableMedia"
              type="checkbox"
              checked={localStorage.hideMedia === "true"}
              onChange={(e) => {
                localStorage.hideMedia = e.currentTarget.checked;
                setHideMedia(e.currentTarget.checked);
              }}
            />
            <label for="disableMedia" class="select-none">
              Hide media embeds
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};

export { Settings };