import Banner, { type BannerConfig } from "@/components/Banner";
import { useCallback, useEffect, useMemo, useState } from "react";
import ParagraphSection from "@/components/layout/ParagraphSection";
import Section from "@/components/layout/Section";
import AnimateTopCard from "@/components/layout/AnimateTopCard";
import BottomTabs from "@/components/layout/BottomTabsSection/BottomTabs";
import { useStore } from "@/store";
import styles from "./Foundation.module.css";
import TopTabsSection from "@/components/layout/TopTabsSection";
import appApi from "@/api/app";
import ScrollReveal from "@/components/ScrollReveal";
export default function Foundation() {
    const appConfig = useStore((s) => s.appConfig);
    const data = appConfig?.social?.foundation;
    const locale = useStore((s) => s.locale)
    const categoryList = useStore((s) => s.categoryList)
    const [activeIndex, setActiveIndex] = useState(0);

    const banner = data.banner;
    const section1Data = data.section1Data;
    const section2Data = data.section2Data;
    const section3Data = data.section3Data;
    const section4Data = data.section4Data;


    const [newsList, setNewsList] = useState<any[]>([]);
    const localNewsList = useMemo(() => {
        return newsList.filter((item: any) => item.lang.toLowerCase() === locale.split('-')[0]);
    }, [newsList, locale])
    const getNewsList = useCallback(() => {
        appApi.getNewsList({
            page: 1, size: 1000, sort: "weight DESC",
            category_id: String(categoryList?.find((item: any) => item.name.includes('【银泰公益基金会】公益传播'))?.id ?? ''),
        }).then((res: any) => {
            setNewsList(res.data.items.map((item: any) => {
                return {
                    id: item.id,
                    title: item.title,
                    content: item.content,
                    path: '/news/detail/' + item.id,
                    image: item.covers_show === 'image' ? item.covers.image[0] : '',
                    video: item.covers_show === 'video' ? item.covers.video[0] : '',
                    lang: item.lang,
                    moreText: 'moreText',
                }
            }));
        });
    }, [])


    const [fileList, setFileList] = useState<any[]>([]);
    const localFileList = useMemo(() => {
        return fileList.filter((item: any) => item.lang.toLowerCase() === locale.split('-')[0]);
    }, [fileList, locale])

    const getFileList = useCallback(async () => {
        const res = await appApi.getDocList({
            page: 1,
            size: 1000,
            // category_id: String(categoryList?.find((item: any) => item.name.includes('社会责任报告'))?.id ?? '')
        })
        const items = res.data.items.filter((item: any) => item.category_name.includes("信息公开"))
        setFileList(items)
    }, [])
    useEffect(() => {
        getNewsList()
        getFileList()
    }, [])

    return (
        <div>
            <Banner
                icon={banner?.icon && <img src={banner?.icon} alt="" style={{ width: '26rem', height: '8.375rem', marginLeft: "-60px" }} />}
                largedesc={banner?.title ?? ""}
                content={(banner as BannerConfig)?.content}
                titleSize={(banner as BannerConfig)?.titleSize ?? "medium"}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            {section1Data && (
                <ParagraphSection data={section1Data} className={styles.topTabsSectionP} >
                    <div style={{ marginTop: "6.25rem" }} />
                    {section1Data.tabItems && <TopTabsSection data={{ tabItems: section1Data.tabItems }} className={styles.topTabsSection} />}
                </ParagraphSection>
            )}
            {section2Data && (
                <Section
                    title={section2Data.title}
                    background={section2Data.backgroundImage ?? ""}
                    maskBackground="rgba(255,255,255,0.3)"
                >
                    <div className={`${styles.publicWelfareDataItems} w-72-inner`}>
                        {localNewsList?.map((item: any, index: number) => (
                            <ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
                                key={index}
                                className={styles.publicWelfareDataItem}
                            >
                                <AnimateTopCard data={item} />
                            </ScrollReveal>
                        ))}
                        <div style={{ marginBottom: "3.125rem" }} />
                    </div>
                </Section>
            )}

            {section3Data && (
                <Section
                    title={section3Data.title}
                    titleColor="#fff"
                    background={section3Data.backgroundImage ?? "/images/bg-overview.png"}
                    maskBackground="rgba(255,255,255,0.1)"
                    height="47.5rem"
                >
                    <div className={`${styles.informationPublicDataContent} w-72-inner`}>
                        <div className={styles.informationPublicDataItems}>
                            {localFileList
                                .filter((item: any) => item.category_name.includes(
                                    section3Data.tabItems?.[activeIndex]?.tabName ?? ''
                                ))
                                .map((item: any, index: number) => (
                                    <div key={index} className={styles.informationPublicDataItem}>
                                        <li onClick={() => item.path.includes("/upload") && window.open(item.path, '_blank')}>
                                            <span>{item.name}</span>
                                        </li>
                                    </div>
                                ))}
                        </div>
                        <BottomTabs
                            tabItems={section3Data.tabItems ?? []}
                            activeIndex={activeIndex}
                            setActiveIndex={setActiveIndex}
                        />
                    </div>
                </Section>
            )}

            {section4Data && (
                <Section title={section4Data.title} background="" maskBackground="#FFFFFF">
                    <div className={`${styles.partnerItems} w-72-inner`}>
                        {section4Data.items?.map((item: any, index: number) => (
                            <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index}>
                                <div key={index} className={styles.partnerItem}>
                                    <img src={item.logo} alt="logo" />
                                </div>
                            </ScrollReveal>
                        ))}
                    </div>
                </Section>
            )}
        </div>
    );
}