import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
import style from "./profile.module.css";
import ApiServerService from "@services/Api.Server.Service";
import { PublicOrganizationServiceView } from "@core/Models/Service.model";
import ProductItem from "@core/app/components/ProductItem/ProductItem";
import Appointment from "./components/Appointment/Appointment";
import OrganizationHeader from "@components/Home/OrganizationHeader/OrganizationHeader";
import ProductGallery from "@core/app/components/Home/ProductsGallery/ProductGallery";
import { ScrollToTop } from "@core/app/components/ScrollTop";
import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
import ServicePrivate from "@core/app/components/ServicePrivate/ServicePrivate";
import EvangelizeBanner from "@components/EvangelizeBanner/EvangelizeBanner";

const GetServiceData = async (serviceId: string): Promise<PublicOrganizationServiceView> => {
    try {
        const organizationServiceData = await ApiServerService.post<PublicOrganizationServiceView>(
            "views/service",
            {
                serviceId: serviceId,
            }
        );

        return organizationServiceData;
    } catch {
        return {} as PublicOrganizationServiceView;
    }
};

type Params = {
    sid: string;
};

type Props = {
    params: Promise<Params>;
};

export default async function OrganizationPublicProfile({ params }: Props) {
    const { sid } = await params;
    const organizationService = await GetServiceData(sid);

    return (
        <>
            {!organizationService.organization && !organizationService.service && (
                <ServicePrivate />
            )}
            {organizationService.organization && organizationService.service && (
                <AnimatedContainer
                    color={organizationService.organization.headerColor}
                    minSize={150}
                    maxSize={500}
                    items={10}
                    style={{
                        background: `linear-gradient(180deg, ${organizationService.organization.headerColor} 0%, var(--white) 50%)`,
                    }}
                >
                    <ScrollToTop />
                    <HeaderConfProvider />
                    <div className="homeCentered">
                        <OrganizationHeader organization={organizationService.organization} />
                        <div className={style.organizationContent}>
                            <div className={style.serviceSide}>
                                <div className={style.stickyWrapper}>
                                    <ProductItem product={organizationService.service} width="100%" />
                                </div>
                            </div>
                            <div className={style.bookingSide}>
                                <div className={style.appointmentWrapper}>
                                    <Appointment
                                        serviceId={sid}
                                        companyId={organizationService.organization.id}
                                        appointmentAlert={
                                            organizationService.organization.appointmentAlert
                                        }
                                    />
                                </div>
                            </div>
                        </div>
                        <EvangelizeBanner variant="banner" />
                        <ProductGallery
                            title="Otros Servicios &#x1F3C6;"
                            data={organizationService.organization.services.data}
                        />
                    </div>
                </AnimatedContainer>
            )}
        </>
    );
}
