import {
  Component, h, useEvent, useProp,
} from "atomico";
import style from "./kun-checkbox.css";
import "../kun-icon/kun-icon";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunCheckbox: Component = ({ width, height }) => {
  const [checked, setChecked] = useProp<boolean>("checked");
  const [disabled] = useProp<boolean>("disabled");
  const checkEvent = useEvent("MyChecked", {
    bubbles: true,
    composed: true,
  });
  const clickChecked = (): void => {
    if (disabled) {
      return;
    }
    setChecked(!checked);
    checkEvent({ checked: !checked });
  };
  return (
    <host>
      <style>{style}</style>
      <div onclick={clickChecked} role="presentation">
        {
          checked ? <div className="icon-checkbox_checked" style={{ width: `${width}px`, height: `${height}px` }} /> : <div className="icon-checkbox_empty" style={{ width: `${width}px`, height: `${height}px` }} />
        }
      </div>
    </host>
  );
};

KunCheckbox.props = {
  disabled: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "disabled",
      bubbles: true,
      composed: true,
    },
  },
  checked: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "UpdateChecked",
      bubbles: true,
      composed: true,
    },
  },
  height: {
    type: Number,
    value: 24,
    reflect: true,
    event: {
      type: "changeMessage1",
    },
  },
  width: {
    type: Number,
    value: 24,
    reflect: true,
    event: {
      type: "changeMessage2",
    },
  },
};

export default getComponentOrDefine("kun-checkbox", KunCheckbox);
