import { useProp, h } from 'atomico';
import 'funfix';
import { g as getComponentOrDefine, r as redirect } from './chunks/65ef80fe.js';
import './kun-icon.js';

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-header-main/kun-header-main.tsx";

const style1 = `
 .fixed-header {
   width: 100%;
   height: 56px;
   display: flex;
   justify-content: center;
   background-color: white;
   align-items: center;
   border-bottom-color: rgba(234,234,234,1);
   border-bottom-style: solid;
   border-bottom-width: 1px;
 }
 
 
 .arrow-dropdown {
    display: flex;
    margin-right: 5px;
    cursor: pointer;
    
    align-items: center;
 }
 
 .right-handler {
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: flex-end;
 }
 
 .centered {
   max-width: 1500px;
   height: 55px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   background-color: white;
   align-items: center;
 }
 
 .icon-edit {
    background-image: url("data:image/svg+xml,%3Csvg t='1573746674663' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6420' width='200' height='200'%3E%3Cpath d='M541.354667 235.588267l254.293333 253.815466c-2.798933 1.6384-7.099733 3.208533-10.103467 6.144-126.088533 124.791467-252.381867 249.4464-377.856 374.920534-16.384 16.384-33.9968 26.8288-56.1152 33.109333-86.016 24.439467-171.758933 50.107733-257.6384 75.229867-19.114667 5.597867-34.133333 0.546133-43.8272-14.336-6.3488-9.762133-6.3488-20.48-3.208533-31.1296 27.374933-93.934933 54.8864-187.733333 82.7392-281.531734 2.048-6.826667 6.3488-13.653333 11.400533-18.6368C271.837867 503.3984 402.909867 373.896533 533.845333 244.3264c2.798933-2.730667 5.256533-6.075733 7.509334-8.738133z m-349.866667 456.704c-1.365333 3.959467-2.389333 6.7584-3.208533 9.6256-11.605333 39.3216-21.777067 79.189333-35.293867 117.828266-7.031467 20.138667-5.051733 34.269867 12.4928 46.2848a38.843733 38.843733 0 0 1 8.533333 8.465067c3.822933 4.983467 8.123733 5.12 13.789867 3.413333 32.085333-9.693867 64.375467-19.114667 96.6656-28.603733l49.493333-14.472533c-2.730667-3.072-4.164267-5.461333-6.280533-7.031467a41.028267 41.028267 0 0 1-17.954133-38.775467c0.477867-6.144-0.341333-12.288-0.682667-18.432l-3.2768-51.882666c-23.620267-1.911467-46.011733-4.232533-68.471467-5.393067-16.384-0.8192-31.812267-2.4576-41.847466-17.749333-0.682667-0.955733-1.8432-1.570133-3.959467-3.2768zM919.552 346.794667L678.843733 106.2912c19.456-17.6128 35.089067-40.7552 60.6208-53.0432 30.72-14.813867 68.949333-7.850667 96.256 18.978133 39.594667 38.980267 79.121067 78.165333 117.896534 117.9648 35.84 36.795733 35.293867 86.4256-0.477867 123.221334-11.127467 11.4688-22.7328 22.528-33.518933 33.314133z m-32.768 47.3088l-54.818133 51.4048-251.426134-251.357867 54.8864-51.473067 251.426134 251.426134z' fill='%23ffffff' p-id='6421'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
 }
 
 .logo-avatar {
    --deckgo-lazy-img-border-radius: 50%;
    --deckgo-lazy-img-height: 41px;
    --deckgo-lazy-img-width: 41px;
    --deckgo-lazy-img-border:1px solid rgba(234,234,234,1);
 }
 
 .icon-menu {
 width: 24px;
 height: 24px;
 margin-right: 4px;
 }
 
 .navigator-menu {
 cursor: pointer;
 margin-right: 40px;
 font-size: 20px;
 color:rgba(159,159,159,1);
line-height:28px;
 }
 .navigator {
 display: flex;
 justify-content: flex-start;
 }
 
 .icon-with-name {
  margin-right: 50px;
  color: rgba(137, 137, 137, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
 }
 .icon {
 width: 24px;
 height: 24px;
 }
 .logo {
   cursor: pointer;
   margin-right: 50px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 .img-logo {
    width: 56px;
    height: 56px;
 }
 .menu {
  display: flex;
  align-items: center;
 }
 .message-icon {
 background-size: cover;
 background-image: url("data:image/svg+xml,%3Csvg t='1573745253123' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6248' width='200' height='200'%3E%3Cpath d='M633 798.1c0 66.5-53.9 120.5-120.5 120.5S392 864.6 392 798.1h241zM809.4 674.2c-43.7-54.7-69.1-95.6-71.7-165.5l-7.2-193.2c0-26.5-0.4-203.8-222.7-194.4-97 0-178.9 64.3-205.6 152.6-5.7 15.4-10.2 66.6-10.2 69l-5.5 165.6c-2.3 70.4-28.1 111.6-71.8 166.9-7.3 9.2-13.6 18.8-19 28.7-18.2 34 6.1 75.1 44.7 75.1h543.9c38.6 0 62.9-41.2 44.7-75.1-5.4-10.2-12-20.2-19.6-29.7z' fill='%23898989' p-id='6249'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .create-menu:hover {
    opacity: 0.7;
 }
 
 .logo-title {
  font-weight:800;
  font-size:24px;
  color:rgba(0,33,64,1);
 }
 
 .create-menu {
 align-items:center;
 cursor: pointer;
 height:41px;
 width:138px;
background:rgba(255,167,47,1);
border-radius:31px;
justify-content: center;
display: flex;
line-height: 41px;
color: white;
}
 }
`;

/**
 * @param {object} props
 * @param {boolean} props.isLogin
 * @param {string} props.avatar
 * @param {array} props.menus
 *
 */
function KunHeaderMain(props) {
  const [seekMenus] = useProp("seekMenus");

  const click2Home = () => {
    redirect("/web/plume/moment");
  };

  const goToMessage = () => {
    redirect("/web/plume/messages");
  };

  const goToDiscoverSeries = () => {
    redirect("/web/plume/series");
  };

  const goToMoment = () => {
    redirect("/web/plume/moment");
  };

  const goToLearning = () => {
    redirect("/web/plume/current-learning");
  };

  return (
    h('host', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 164}}
      , h('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 165}}, style1)
      , h('div', { className: "fixed-header", __self: this, __source: {fileName: _jsxFileName, lineNumber: 166}}
        , h('div', { className: "centered", __self: this, __source: {fileName: _jsxFileName, lineNumber: 167}}
          , h('div', { className: "navigator", __self: this, __source: {fileName: _jsxFileName, lineNumber: 168}}
            , h('div', { className: "logo", onclick: click2Home, __self: this, __source: {fileName: _jsxFileName, lineNumber: 169}}
              , h('kun-icon', { title: "logo", className: "header-img-logo", __self: this, __source: {fileName: _jsxFileName, lineNumber: 170}} )
              , h('span', { className: "logo-title", __self: this, __source: {fileName: _jsxFileName, lineNumber: 171}}, "马上知识"

              )
            )
            , h('div', { className: "menu", __self: this, __source: {fileName: _jsxFileName, lineNumber: 175}}
              , h('div', { className: "navigator-menu hover:underline" , onclick: goToMoment, __self: this, __source: {fileName: _jsxFileName, lineNumber: 176}}, "发现"

              )
              , h('div', { className: "navigator-menu hover:underline" , onclick: goToDiscoverSeries, __self: this, __source: {fileName: _jsxFileName, lineNumber: 179}}, "专辑"

              )
              , h('div', { className: "navigator-menu hover:underline" , onclick: goToLearning, __self: this, __source: {fileName: _jsxFileName, lineNumber: 182}}, "学习"

              )
            )
          )

          , h('div', { className: "right-handler", __self: this, __source: {fileName: _jsxFileName, lineNumber: 188}}
            , h('div', { className: "icon-with-name", onclick: goToMessage, __self: this, __source: {fileName: _jsxFileName, lineNumber: 189}}
              , h('div', { className: "header-message-icon icon" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 190}} ), "消息"

            )

            , h('kun-avatar-dropdown', { 'seek-menus': seekMenus, 'seek-avatar': props.seekAvatar, __self: this, __source: {fileName: _jsxFileName, lineNumber: 194}} )

            , h('div', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 196}}
              , h('div', { className: "create-menu", __self: this, __source: {fileName: _jsxFileName, lineNumber: 197}}
                , h('div', { className: "icon-menu icon-edit" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 198}} ), "知识卡片"

              )
            )
          )

        )
      )
    )
  );
}

KunHeaderMain.props = {
  seekAvatar: {
    type: String,
  },
  seekIsLogin: {
    type: Boolean,
  },
  seekMenus: {
    type: Array,
  },
};

var kunHeaderMain = getComponentOrDefine("kun-header-main", KunHeaderMain);

export default kunHeaderMain;
export { KunHeaderMain };
