import {
  Component,
  h, useEvent, useProp, useRef,
} from "atomico";
import { Option } from "funfix";
// eslint-disable-next-line no-unused-vars
import { ChatGroupRecord } from "@caedman/seek-api/build/api/get-chat-groups";
import style from "./kun-chat-group.css";
import "../kun-image/kun-image";
import "../kun-icon/kun-icon";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const getMaxCount = (count: number) => {
  if (count > 999) {
    return 999;
  }
  return count;
};

// deckDeckGoElement();
const getType = (type: string): string => {
  switch (type) {
    case "LIKE": {
      return "dianzan";
    }
    case "COMMENT": {
      return "comment";
    }
    case "SYSTEM": {
      return "system";
    }
    default: {
      return "zan";
    }
  }
};

const KunChatGroup: Component = () => {
  const [item1] = useProp<ChatGroupRecord>("item");
  const [selected] = useProp<boolean>("selected");

  const item: ChatGroupRecord = Option.of(item1).getOrElse({
    groupName: "1",
    groupType: "SYSTEM",
    toRead: 999,
  } as ChatGroupRecord);

  const ref = useRef();
  const myGroupEvent = useEvent("MyGroup", {
    bubbles: true,
    composed: true,
  });

  // const host = useHost();
  const selectItem = (): void => {
    myGroupEvent({});
    // ref.current.dispatchEvent(new CustomEvent('needle-group', { detail: props.needleId }));
    // host.current.dispatchEvent(new CustomEvent('needle-group', { detail: props.needleId }));
    // useEffect(() => {
    // }, [ref]);

    // if(props.handleSelectGroup) {
    //   props.handleSelectGroup()
    // }
  };

  return (
    <host>
      <style>{style}</style>
      <div className={`frow row  justify-between group-item hover:bg-gray-300 cursor-pointer ${selected ? "bg-gray-200" : ""}`} onclick={selectItem} ref={ref} role="presentation">
        <div className="cover-left frow justify-center pt-10 items-center flex">
          <kun-icon iconType={getType(item.groupType)} iconWidth={32} iconHeight={32} />
        </div>
        <div className="message-right">
          <div className="message-content w-full">
            <div class="flex justify-between w-full">
              <span className="message-title">
                {item.groupName}
              </span>
              {
                item.toRead > 0 && (
                <div class="flex inline-flex text-black items-center mr-4">
                  <span class="red-dot mr-1" />
                  {getMaxCount(item.toRead)}
                </div>
                )
              }
            </div>
            <span className="message-description" />
          </div>
        </div>
      </div>
    </host>
  );
};

KunChatGroup.props = {
  selected: {
    type: Boolean,
  },
  item: {
    type: Object,
  },
};

export default getComponentOrDefine("kun-chat-group", KunChatGroup);
