/**
 * 知识库
 */

import { View, Text } from "@tarojs/components";
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";
import PageTitle from '@/components/PageTitle'
import WemetaTabs from "@/components/wemeta-tabs/index";
import BlurContainer from "@/components/BlurContainer";
import PersonalTab from "./components/PersonalTab";
import CompanyTab from "./components/CompanyTab";
import CorrectionTab from "./components/CorrectionTab";
import CheckLoginPopup from '@/components/CheckLoginPopup'
import style from "./index.module.less";
import { useRef, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import LoginMutationContext from './LoginMutationContext'

// 渲染统一容器带高光圆角的头部
// !!! 注意，这里层级不能再深嵌套了,否则内部使用的微信自定义组件 slide-delete 将无法编译成功!!!
const renderTabContainer = (children: JSX.Element) => {
  return (
    <BlurContainer className='mt-12 h-full flex flex-col'>
      {children}
    </BlurContainer>
  );
};

export default function Index() {
  
  const [isMutate, setLoginMutation] = useState(false)
  const loginRef = useRef<{ setShowLogin: (show: boolean) => void }>(null);

  const tabList = [
    {
      key: "1",
      label: "个人知识",
      children: renderTabContainer(<PersonalTab />),
    },
    {
      key: "2",
      label: "企业知识",
      children: renderTabContainer(<CompanyTab />),
    },
    {
      key: "3",
      label: "纠错记录",
      children: renderTabContainer(<CorrectionTab />),
    },
  ];

  const setLoginShow = ()=> {
    loginRef.current?.setShowLogin(true)
  }

  const onLoginEnd = ()=> {
    setLoginMutation(!isMutate)
  }
  useDidShow(()=> {
    setLoginMutation(!isMutate)
  })
  

  return (
    <PageCustom fullPage isflex isTabPage>
      <NavBarNormal
        scrollFadeIn
        leftColumn={() => <PageTitle>知识库</PageTitle>}
      ></NavBarNormal>
      <View className="w-full h-full flex flex-col">
        <View className={style.container}>
          <LoginMutationContext.Provider value={{ isMutate, setLoginShow }}>
            <WemetaTabs current="1" list={tabList} className="px-16"></WemetaTabs>
          </LoginMutationContext.Provider>
        </View>
      </View>
      <CheckLoginPopup onEnd={onLoginEnd} ref={loginRef}></CheckLoginPopup>
    </PageCustom>
  );
}
