import styles from "./Button.module.css";
import { createEffect, createSignal } from "solid-js";

enum BtnType {
  click = 0,
  switch = 1,
}
export type Button =
  | {
      type: BtnType.click;
      name: string;
      color?: string;
    }
  | {
      type: BtnType.switch;
      name: string;
    };

export default function Button(props: Button) {
  const [value, setValue] = createSignal(false);
  const [bgColor, setBgColor] = createSignal<string>();

  createEffect(() => {
    if (props.type === BtnType.click) {
      setBgColor(value() ? "pink" : "blue");
    } else {
      setBgColor(value() ? "green" : "red");
    }
  });

  function onClick() {
    if (props.type === BtnType.click) {
      if (value() === true) {
        return;
      }
      setValue(true);
      setTimeout(() => {
        setValue(false);
      }, 3000);
    } else {
      setValue((old) => !old);
    }
  }

  return (
    <button
      on:click={onClick}
      class={styles.btn}
      style={{ "background-color": bgColor() }}
    >
      {
        //btnText()
      }
      {props.name}
    </button>
  );
}