import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
import ApiServerService from "@services/Api.Server.Service";
import { PublicOrganizationView } from "@core/Models/Company.model";
import OrganizationHeader from "@core/app/components/Home/OrganizationHeader/OrganizationHeader";
import OrganizationDataConnector from "./components/OrganizationData";

const GetOrganizationData = async (companyId: string): Promise<PublicOrganizationView> => {
    try {
        const organizationData = await ApiServerService.post<PublicOrganizationView>(
            "views/organization",
            {
                companyId: companyId,
            }
        );

        return organizationData;
    } catch {
        return {} as PublicOrganizationView;
    }
};

type Params = {
    oid: string;
};

type Props = {
    params: Promise<Params>; // `params` ahora es una Promesa
    children: React.ReactNode;
};

export default async function OrganizationPublicProfile({ params, children }: Props) {
    const { oid } = await params;
    const orgData = await GetOrganizationData(oid);

    return (
        <AnimatedContainer
            color={orgData.headerColor}
            minSize={150}
            maxSize={500}
            items={10}
            style={{
                background: `linear-gradient(180deg, ${orgData.headerColor} 0%, var(--white) 50%)`,
            }}
        >
            <div className="homeCentered">
                {orgData.id && (
                    <>
                        <div style={{ position: "relative" }} id="header-wrapper">
                            <OrganizationHeader organization={orgData} />
                        </div>
                        <OrganizationDataConnector orgData={orgData} />
                        <div>{children}</div>
                    </>
                )}

                {!orgData.id && (
                    <div
                        style={{
                            backgroundImage: `url(/no-org-slug.webp)`,
                            backgroundRepeat: "no-repeat",
                            backgroundPosition: "center center",
                            backgroundSize: "50% auto",
                            width: "100%",
                            height: "750px",
                            color: "var(--wine-red)",
                            fontWeight: "600",
                            fontSize: "26px",
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "flex-end",
                            marginTop: "10px",
                            marginBottom: "30px",
                            textAlign: "center",
                            paddingLeft: "20px",
                            paddingRight: "20px",
                        }}
                    >
                        <p style={{ padding: "20px" }}>
                            La organización que estas buscando no existe
                        </p>
                    </div>
                )}
            </div>
        </AnimatedContainer>
    );
}