import React, { useMemo } from "react";
import { useFormikContext } from "formik";
import JobsBox from "@/Component/Common/JobsBox";
import {
    BannerPosition,
    serializeCampaignAttachments,
} from "@/Utils/Other/campaignAttachment";


type PreviewProps = {
    selectedPlatforms: string[];
    uploadedFiles: { fileName: string; position?: BannerPosition }[];
    userDetails: any;
    translations: any;
    isFromCreate: boolean;
    openAttachmentPicker: any;
    onBannerPositionChange: (fileName: string, position: BannerPosition) => void;
};

const PreviewCampaign = (props) => {
    const {
        selectedPlatforms,
        uploadedFiles,
        userDetails,
        translations,
        isFromCreate,
        openAttachmentPicker,
        onBannerPositionChange,
    }: PreviewProps = props;
    const { values } = useFormikContext<any>();

    const data = useMemo(() => {
        const jobReq =
            Array.isArray(values?.job_requirement)
                ? values.job_requirement.map((o: any) => o?.value ?? o).filter(Boolean)
                : [];

        const attachments =
            Array.isArray(uploadedFiles) && uploadedFiles.length
                ? serializeCampaignAttachments(uploadedFiles)
                : [];

        return {
            // ---- minimum fields JobsBox uses ----
            id: 0,
            slug: "preview",
            isArchived: 0,
            isCampaignSaved: false,
            campaign_name: values?.campaign_name || "—",
            users: {
                image: userDetails?.image || "/assets/images/placeholder.jpg",
                company_name: userDetails?.company_name || "—",
                country: userDetails?.country || "—",
            },
            platforms: selectedPlatforms || [],
            attachment: attachments,
            job_privacy: values?.job_privacy || "in_person",
            job_requirement: jobReq, // array of strings

            // money/product
            currency: values?.currency || "USD",
            budget_per_influencer:
                values?.is_barter === "true" ? 0 : Number(values?.budget_per_influencer || 0),
            product_value: Number(values?.product_value || 0),

            // dates (JobsBox formats with moment inside)
            posting_start_date: values?.posting_date_range?.[0] || new Date(),
            posting_end_date: values?.posting_date_range?.[1] || new Date(),

            // misc
            applied: 0,
            campaignInfluencers: [], // to avoid Applied/Completed ribbons
        };
    }, [values, selectedPlatforms, uploadedFiles, userDetails]);

    // 3) Render your real card, click disabled in preview
    const noop = () => { };

    return (
        <JobsBox
            data={data}
            userDetails={userDetails}
            translations={translations}
            setOpenSideModal={noop}
            isFromCreate={isFromCreate}
            onCoverClick={openAttachmentPicker}
            onBannerPositionChange={onBannerPositionChange}
        />
    )
}

export default PreviewCampaign