import { Signal, useSignal } from "@preact/signals";
import { useId, useState } from "preact/hooks";

interface CheckboxProps {
  label: string;
  isChecked?: boolean;
  onChange: (isChecked: boolean) => void;
}

const Checkbox2: preact.FunctionalComponent<CheckboxProps> = (
  { label, isChecked = false, onChange },
) => {
  const [checked, setChecked] = useState(isChecked);

  const toggleCheckbox = () => {
    const newChecked = !checked;
    setChecked(newChecked);
    onChange(newChecked);
  };

  return (
    <div
      class="flex items-center rounded-xl p-1 pl-4"
      style={{ background: "var(--background)", color: "var(--foreground)" }}
    >
      <span>
        {label}
      </span>
      <label
        class="relative flex cursor-pointer items-center rounded-full p-3"
        for="checkbox"
        data-ripple-dark="true"
      >
        <input
          type="checkbox"
          class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity  hover:before:opacity-10"
          id="checkbox"
          checked
        />
        <div
          class={`pointer-events-none absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-${
            checked ? 100 : 0
          } transition-opacity`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-3.5 w-3.5"
            viewBox="0 0 20 20"
            fill="white"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            >
            </path>
          </svg>
        </div>
      </label>
    </div>
  );
};

const Checkbox = (
  { label, checked = useSignal(false) }: {
    label: string;
    checked?: Signal<boolean>;
  },
) => {
  const _id = useId();
  const id = `checkbox-${_id}`;
  return (
    <label
      className="flex items-center py-3 px-4 rounded-2xl"
      style={{ color: "var(--foreground)", background: "var(--background)" }}
    >
      <input
        type="checkbox"
        checked={checked.value}
        name="checkbox-one"
        id={id}
        onChange={(ev) => {
          checked.value = ev.currentTarget.checked;
        }}
        class="bg-gray-200 hover:bg-gray-300 cursor-pointer 
    w-5 h-5 border-3 border-amber-500 focus:outline-none rounded-lg"
      />
      <span class="ml-3">{label}</span>
    </label>
  );
};

export default Checkbox;