import { useProp, h } from 'atomico';
import { Option } from 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';
import { C as CONST_SIX_CONFIG } from './chunks/a234fa33.js';
import './kun-image-or-default.js';
import '@caedman/kit/dist/use-stylesheet';
import 'lazyload-image';
import './kun-image.js';
import dayjs from 'dayjs';

var style = ".avatar {\n  --deckgo-lazy-img-border-radius: 50px;\n  --deckgo-lazy-img-height: 37.5px;\n  --deckgo-lazy-img-width: 37.5px;\n  --sapUiContentNonInteractiveIconColor: #d13829;\n  sapPrimary7: rgba(171, 171, 238, 0.91)\n}\n\n.chat-item {\n  width: 100%;\n  padding: 8px 0 8px 16px;\n  display: flex;\n  justify-content: space-between;\n  background-color: transparent;\n}\n\n.chat-item .chat-item-content {\n  padding: 10px 12px;\n  background:rgba(240,241,243,1);\n  border-radius:5px;\n}\n\n.chat-item  .chat-item-username {\n  color: rgba(89, 89, 89, 0.72);\n}\n\n.chat-item.hover {\n  background-color: #f7f7f7;\n}\n\n.chat-item {\n  justify-content: space-between;\n}\n\n.chat-item.justify-right {\n  justify-content: flex-end;\n}\n\n.chat-item-avatar {\n  width: 62.5px;\n  display: flex;\n  justify-content: center;\n}\n\n.date-time {\n  font-size: 14px;\n  color:rgba(106,106,106,1);\n}\n\n.chat-item-update-time {\n  padding: 10px 0;\n  width: 100%;\n  text-align: center;\n}\n\n.chat-item-left {\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.chat-item-needleAvatar {\n  margin-right: 10px;\n}\n\n.avatar {\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n}\n\n.chat-item-menu {\n  margin-right: 10px;\n  padding: 8px;\n  width: 28px;\n  height: 20px;\n  cursor: pointer;\n  line-height: 28px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 8px;\n  align-items: flex-end;\n}\n\n.chat-item-needleContent {\n  font-size: 21px;\n}\n\n.chat-item-username {\n  font-size: 18px;\n}\n\n.message-box {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-chat-message/kun-chat-message.tsx";
const getKunImageUrl = (url) => (url != null ? `${CONST_SIX_CONFIG.FILE_DOMAIN}${url}` : url);

const KunChatMessage = () => {
  const [item1] = useProp("item");
  const item = Option.of(item1).getOrElse({
    channelId: 50,
    fromUser: null,
    fromUserAvatar: null,
    fromUserName: null,
    createAt: 1,
    groupId: "180cbc30-b472-11e9-9308-23b182dba4a3",
    msgContent: "message 6",
    msgId: "988af500-b8ac-11e9-838a-796d3a02af3a",
    msgType: "TEXT",
  } );

  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}, style)
      , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}
        , h('div', { className: "chat-item-update-time", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}} )
        , h('div', { className: "chat-item", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 31}}
          , h('div', { className: "chat-item-left w-full flex"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 32}}
            , h('div', { className: "chat-item-needleAvatar flex-none" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
              , h('kun-image-or-default', {
                url: getKunImageUrl(item.fromUserAvatar),
                width: 36,
                height: 36, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}}
              )
            )
            , h('div', { className: "message-box w-full flex-auto cursor-pointer"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 40}}
              , h('div', { class: "flex flex-row" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}
                , h('span', { className: "chat-item-username mr-4" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}, item.fromUserName || "用户")
                , h('span', { className: "date-time", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}}
                  , dayjs(item.createAt).format("YYYY-MM-DD HH:mm")
                )
              )
              , h('div', { className: "chat-item-needleContent", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 47}}
                , item.msgContent
              )
            )
          )
        )
      )
    )
  );
};

KunChatMessage.props = {
  item: {
    type: Object,
  },
};

var kunChatMessage = getComponentOrDefine("kun-chat-message", KunChatMessage);

export default kunChatMessage;
export { getKunImageUrl };
