import { ActionIcon } from '@lobehub/ui';
import { Compass, FolderClosed, MessageSquare } from 'lucide-react';
import Link from 'next/link';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { useGlobalStore } from '@/store/global';
import { SidebarTabKey } from '@/store/global/initialState';
import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
import { useSessionStore } from '@/store/session';
import { useUserStore } from '@/store/user';
import { createStyles } from 'antd-style';
import { Image } from "antd";

const useStyles = createStyles(({ css }) => ({
  iconImg: css`
    width: 48px;
    height: 48px;
  `,
  iconSelectText: css`
    color: #0044FF;
  `,
  iconText: css`
    text-align: center;
    color: #fff;
  `,
  linkUrl: css`
    width: 100px;
    text-align: center;
    display: inline-block;
  `,
  linkclic: css`
    background-color: #fff;
  `,
}));

export interface TopActionProps {
  isPinned?: boolean | null;
  tab?: SidebarTabKey;
}

const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
  const { t } = useTranslation('common');
  const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
  const { showMarket, enableKnowledgeBase } = useServerConfigStore(featureFlagsSelectors);
  const { styles, cx } = useStyles()
  const [value, setValue] = useState("chat")

  return (
    <>
      <Link
        aria-label={t('tab.chat')}
        className={value === '/chat' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)}
        href={'/chat'}
        onClick={(e) => {
          e.preventDefault();
          setValue("/chat")
          console.log(value)
          switchBackToChat(useSessionStore.getState().activeId);
        }}
      >
        <Image alt={"chat"} className={cx(styles.iconImg)} preview={false} src="/images/hh.png" />
        <div className={value === '/chat' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>会话</div>
      </Link>
      {enableKnowledgeBase && (
        <Link aria-label={t('tab.files')}  className={value === '/discover/assistants' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)} href={`/discover/assistants`} onClick={() => {setValue("/discover/assistants")}}>
          <Image alt={"files"} className={cx(styles.iconImg)} preview={false} src="/images/zs.png" />
          <div className={value === '/discover/assistants' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>助手</div>
        </Link>
      )}
      {showMarket && (
        <Link aria-label={t('tab.discover')} className={value === '/applicationset' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)} href={'/applicationset'} onClick={() => {setValue("/applicationset")}}>
          <Image alt={"discover"} className={cx(styles.iconImg)} preview={false} src="/images/gj.png" />
          <div className={value === '/applicationset' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>AI应用集</div>
        </Link>
      )}
      {showMarket && (
        <Link aria-label={t('tab.model')} className={value === '/model' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)} href={`/discover/models`} onClick={() => {setValue("/model")}}>
          <Image alt={"model"} className={cx(styles.iconImg)} preview={false} src="/images/mx.png" />
          <div className={value === '/model' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>模型</div>
        </Link>
      )}
      {/*{showMarket && (*/}
      {/*  <Link aria-label={t('tab.robot')} className={value === '/robot' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)} href={'/robot'} onClick={() => {setValue("/robot")}}>*/}
      {/*    <Image alt={"robot"} className={cx(styles.iconImg)} preview={false} src="/images/szr.png" />*/}
      {/*    <div className={value === '/robot' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>数字人</div>*/}
      {/*  </Link>*/}
      {/*)}*/}
      {showMarket && (
        <Link aria-label={t('tab.plugins')} className={value === '/plugins' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)} href={`/discover/plugins`} onClick={() => {setValue("/plugins")}}>
          <Image alt={"plugins"} className={cx(styles.iconImg)} preview={false} src="/images/cj.png" />
          <div className={value === '/plugins' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>插件</div>
        </Link>
      )}
      {/*{showMarket && (*/}
      {/*  <Link aria-label={t('tab.knowledge')} className={value === '/knowledge' ? cx(styles.linkUrl, styles.linkclic) : cx(styles.linkUrl)} href={'/knowledge'} onClick={() => {setValue("/knowledge")}}>*/}
      {/*    <Image className={cx(styles.iconImg)} preview={false} src="/images/zsk.png" />*/}
      {/*    <div className={value === '/knowledge' ? cx(styles.iconText, styles.iconSelectText) : cx(styles.iconText) }>知识库</div>*/}
      {/*  </Link>*/}
      {/*)}*/}
    </>
  );
});

export default TopActions;
