import React, { FC, useEffect, useState } from "react";

import { FormWidget, FormWidgetConfig, FormWidgetEnv, WidgetStylesheet } from "@xapp/form-widget";
import { PartnerDetails } from "./utils/partnerDetails";

export interface ContactPageProps extends Pick<FormWidgetEnv, "partnerId" | "businessName"> {
    /**
     * URL of the business logo, displayed in the header
     */
    businessLogoUrl?: string;
    /**
     * Address of the business, displayed in the header
     *
     */
    businessAddress?: string;
    /**
     * Website of the business, displayed in the footer
     */
    businessWebsite?: string;

    config: FormWidgetConfig;

    /**
     * Partner details (fetched from API or legacy hardcoded)
     */
    partnerDetails?: PartnerDetails;

    theme?: {
        backgroundColor?: string;
        headerBackgroundColor?: string;
        headerBusinessNameColor?: string;
    };
    /**
     * Disables the "Powered by XAPP AI" link in the footer
     */
    disablePoweredBy?: boolean;
    /**
     * Custom message for the "powered by" footer text
     */
    poweredByMessage?: string;
    /**
     * Custom URL for the "powered by" footer link
     */
    poweredByUrl?: string;
    /**
     * Callback invoked when the user submits the form. Used to fire external
     * conversion tracking (e.g. a Meta Pixel `Lead` event). Receives no
     * arguments by design — no form PII is exposed to the caller.
     */
    onSubmit?: () => void;
}

/**
 * Stand alone contact page that uses the FormWidget
 *
 * You must also include WidgetStylesheet on the same view/page as the ContactPage to successfully style the widget.
 * @param props
 * @returns
 */
export const ContactPage: FC<ContactPageProps> = (props) => {
    const {
        config,
        businessAddress,
        businessName,
        businessWebsite,
        businessLogoUrl,
        disablePoweredBy,
        partnerId,
        partnerDetails,
        theme,
        poweredByMessage,
        poweredByUrl,
        onSubmit,
    } = props;

    const { backgroundColor, headerBackgroundColor, headerBusinessNameColor } = theme || {};

    return (
        <div className="App" style={{ backgroundColor }}>
            {businessName || businessLogoUrl ? (
                <div className="Header" style={{ backgroundColor: headerBackgroundColor }}>
                    {businessLogoUrl && (
                        <img className={"BusinessLogo"} src={businessLogoUrl} alt={businessName} />
                    )}
                    {businessAddress && (
                        <p className={"BusinessAddress"} style={{ color: headerBusinessNameColor }}>
                            {businessAddress}
                        </p>
                    )}
                </div>
            ) : null}
            <div className="Content">
                <FormWidget config={config} docked={true} onSubmit={onSubmit} />
            </div>
            <div className="Footer" style={{ ...partnerDetails?.style?.footer }}>
                <div className="BusinessInfo">
                    {businessName && <b>{businessName}</b>}
                    {businessAddress && !partnerDetails && <p>{businessAddress}</p>}
                    {businessWebsite && <a href={businessWebsite}>Visit Our Website</a>}
                </div>
                {!disablePoweredBy && !partnerDetails && (
                    <a className={"XAPP"} target="_blank" href={poweredByUrl || "https://xapp.ai"}>
                        {poweredByMessage || "Powered by XAPP AI"}
                    </a>
                )}
                {partnerDetails && (
                    <div className={"PartnerInfo"}>
                        <p className={"PoweredBy"}>Powered by</p>
                        {partnerDetails?.partnerWebsite ? (
                            <a
                                className={"Partner"}
                                target="_blank"
                                href={partnerDetails.partnerWebsite}
                            >
                                {partnerDetails.partnerLogoUrl ? (
                                    <img
                                        className={"PartnerLogo"}
                                        src={partnerDetails.partnerLogoUrl}
                                        alt={partnerDetails.partnerName}
                                    />
                                ) : (
                                    <span>{partnerDetails.partnerName}</span>
                                )}
                            </a>
                        ) : partnerDetails.partnerLogoUrl ? (
                            <img
                                className={"PartnerLogo"}
                                src={partnerDetails.partnerLogoUrl}
                                alt={partnerDetails.partnerName}
                            />
                        ) : (
                            <span>{partnerDetails.partnerName}</span>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
};
