import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { a as useRef } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import { O as Option } from './chunks/a02c5734.js';
import './chunks/d76d6172.js';
import './kun-icon.js';
import './chunks/e5702756.js';
import './kun-image.js';

var style = ".avatar{\n  --deckgo-lazy-img-border-radius: 50px;\n  width: 50px;\n  height: 50px;\n}\n\n.group-item {\n  width: 100%;\n  height: 63px;\n  background-color: white;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n  border-bottom-color: #f2f2f2;\n}\n\n.group-item > .cover-left {\n  padding-top: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  width: 70px;\n}\n\n.group-item > .message-right {\n  padding-right: 11px;\n  padding-top: 16px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n}\n\n.message-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.message-content > .message-title {\n  font-weight:500;\n  color:rgba(51,51,51,1);\n  line-height:23px;\n}\n\n.message-description {\n  font-size:13px;\n  font-weight:400;\n  color:rgba(176,176,176,1);\n  line-height:18px;\n}\n\n.group-item.selected {\n  background-color: #f7f7f7;\n}\n\n.river-avatar-image {\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n}\n\n.date-time {\n  font-size:13px;\n  font-weight:400;\n  color:rgba(176,176,176,1);\n  line-height:18px;\n}\n\n.red-dot {\n  border-radius: 50%;\n  background-color: red;\n  color:white;\n  width:0.4em;\n  height:0.4em;\n  /*font-size: 6px;*/\n  padding: 2px;\n}\n\n";

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

  return count;
}; // deckDeckGoElement();


const getType = type => {
  switch (type) {
    case "LIKE":
      {
        return "dianzan";
      }

    case "COMMENT":
      {
        return "comment";
      }

    case "SYSTEM":
      {
        return "system";
      }

    default:
      {
        return "zan";
      }
  }
};

const KunChatGroup = () => {
  const [item1] = useProp("item");
  const [selected] = useProp("selected");
  const item = Option.of(item1).getOrElse({
    groupName: "1",
    groupType: "SYSTEM",
    toRead: 999
  });
  const ref = useRef();
  const myGroupEvent = useEvent("MyGroup", {
    bubbles: true,
    composed: true
  }); // const host = useHost();

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

KunChatGroup.props = {
  selected: {
    type: Boolean
  },
  item: {
    type: Object
  }
};
var kunChatGroup = getComponentOrDefine("kun-chat-group", KunChatGroup);

export default kunChatGroup;
//# sourceMappingURL=kun-chat-group.js.map
