import { useProp, useRef, useEvent, h } from 'atomico';
import { Option } from 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';
import '@caedman/kit/dist/use-stylesheet';
import 'lazyload-image';
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 _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-chat-group/kun-chat-group.tsx";
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', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 68}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 69}}, 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", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 70}}
        , h('div', { className: "cover-left frow justify-center pt-10 items-center flex"     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 71}}
          , h('kun-icon', { iconType: getType(item.groupType), iconWidth: 32, iconHeight: 32, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 72}} )
        )
        , h('div', { className: "message-right", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 74}}
          , h('div', { className: "message-content w-full" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 75}}
            , h('div', { class: "flex justify-between w-full"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 76}}
              , h('span', { className: "message-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 77}}
                , item.groupName
              )
              , 
                item.toRead > 0 && (
                h('div', { class: "flex inline-flex text-black items-center mr-4"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 82}}
                  , h('span', { class: "red-dot mr-1" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 83}} )
                  , getMaxCount(item.toRead)
                )
                )
              
            )
            , h('span', { className: "message-description", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 89}} )
          )
        )
      )
    )
  );
};

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

var kunChatGroup = getComponentOrDefine("kun-chat-group", KunChatGroup);

export default kunChatGroup;
