import Banner, { type BannerConfig } from "@/components/Banner";
import { useState } from "react";
import ParagraphSection from "@/components/layout/ParagraphSection";
import ColumnXGrids from "@/components/layout/ColumnXGrids";
import Section from "@/components/layout/Section";
import AnimateTopCard from "@/components/layout/AnimateTopCard";
import { useStore } from "@/store";
import styles from "./Sustainability.module.css";

export default function Sustainability() {
    const appConfig = useStore((s) => s.appConfig);
    const data = appConfig?.social?.sustainability;
    const [sliceIndex, setSliceIndex] = useState(4);

    if (!data) return null;

    const banner = data.banner;
    const section1Data = data.section1Data;
    const section2Data = data.section2Data?.items ?? [];
    const section3Data = data.section3Data;
    const section4Data = data.section4Data;

    const columnXGridsData = section2Data;

    return (
        <div>
            <Banner
                title={banner?.title ?? ""}
                content={(banner as BannerConfig)?.content}
                titleSize={(banner as BannerConfig)?.titleSize ?? "medium"}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            {section1Data && (
                <ParagraphSection data={section1Data}>
                    <ColumnXGrids items={columnXGridsData} />
                </ParagraphSection>
            )}

            {section3Data && (
                <Section
                    title={section3Data.title}
                    background=""
                    maskBackground="rgba(255,255,255,0.3)"
                >
                    <p className={styles.socialResponsibilityCaseDataContent}>
                        {section3Data.content}
                    </p>
                    <div className={styles.socialResponsibilityCaseDataItems}>
                        {section3Data.items?.map((item: any, index: number) => (
                            <div
                                key={index}
                                className={styles.socialResponsibilityCaseDataItem}
                                style={{ backgroundImage: `url(${item.backgroundImage})` }}
                            >
                                <AnimateTopCard data={item} />
                            </div>
                        ))}
                    </div>
                </Section>
            )}

            {section4Data && (
                <Section
                    title={section4Data.title}
                    background=""
                    maskBackground="#F7FBFF"
                >
                    <div className={styles.socialResponsibilityReportData}>
                        {section4Data.items?.slice(0, sliceIndex).map((item: any, index: number) => (
                            <div
                                key={index}
                                className={styles.socialResponsibilityReportItem}
                            >
                                <div
                                    className={styles.socialResponsibilityReportItemCover}
                                    style={{ backgroundImage: `url(${item.coverImage})` }}
                                />
                                <div className={styles.socialResponsibilityReportItemTitle}>
                                    {item.title}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div
                        className={styles.socialResponsibilityReportItemMore}
                        onClick={() =>
                            setSliceIndex(
                                sliceIndex < (section4Data.items?.length ?? 0)
                                    ? sliceIndex + 4
                                    : 4
                            )
                        }
                    >
                        {sliceIndex < (section4Data.items?.length ?? 0) ? "了解更多" : "收起"}
                    </div>
                </Section>
            )}
        </div>
    );
}