import {useEffect, useState} from "react";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {listCmsArticle} from "@/api/cms/cmsArticle";
import {Collapse, Image, SearchBar} from '@nutui/nutui-react-taro'
import {ArrowDown} from '@nutui/icons-react-taro'
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
import {listCmsNavigation} from "@/api/cms/cmsNavigation";


const Helper = () => {
  const [list, setList] = useState<CmsArticle[]>([])
  const [navigation, setNavigation] = useState<CmsNavigation>()

  const reload = async () => {
    const navs = await listCmsNavigation({model: 'help', parentId: 0});
    if (navs.length > 0) {
      const nav = navs[0];
      setNavigation(nav);
    }
    listCmsArticle({model: 'help'}).then(res => {
      setList(res)
    }).catch(error => {
      console.error("Failed to fetch goods detail:", error);
    })
  }

  useEffect(() => {
    reload().then()
  }, []);

  return (
    <>
      <SearchBar shape="round" className={'mt-2'} />
      {navigation && (
        <Image
          src={navigation.icon}
          mode={'scaleToFill'}
          className={'mt-2 mb-4 w-full'}
          height={120}
          lazyLoad={false}
        />
      )}
      {list.map((item, index) => (
        <Collapse defaultActiveName={['1', '2']} expandIcon={<ArrowDown/>}>
          <Collapse.Item
            title={
              <div className={'flex items-center'}>
                <div className={'text-sm'}>{item.title}</div>
              </div>
            }
            name={`${index}`}
          >
            <div className={'text-sm'}>{item.comments}</div>
          </Collapse.Item>
        </Collapse>
      ))}
    </>
  );
};

export default Helper;