import {
  Component, h, useEffect, useProp,
} from "atomico";
import { Maybe } from "purify-ts/es/Maybe";
import style from "./kun-icon.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunIcon = () => {
  const [type] = useProp<string>("iconType");
  const [iconType, setIconType] = useProp<string>("title");
  const iconTypes = type ?? iconType;
  const [height] = useProp<number>("iconHeight");
  const [width] = useProp<number>("iconWidth");
  const clsName = `icon icon-${Maybe.fromFalsy(iconTypes).orDefault("zan")}`;

  useEffect(() => {
    setIconType(type);
  }, [iconType, type]);

  return (
    <host>
      <style>{style}</style>
      {
        type != null && (
        <div className={clsName} style={{ width: `${width}px`, height: `${height}px` }} />
        )
      }
    </host>
  );
};

KunIcon.props = {
  iconType: {
    type: String,
  },
  title: {
    type: String,
  },
  iconWidth: {
    type: Number,
    value: 40,
    reflect: true,
  },
  iconHeight: {
    type: Number,
    value: 40,
    reflect: true,
  },
  height: {
    type: Number,
    value: 40,
    reflect: true,
  },
  width: {
    type: Number,
    value: 40,
    reflect: true,
  },
};

export default getComponentOrDefine("kun-icon", KunIcon);
