import React from 'react';
import { LabelProps } from '@bigbinary/neetoui';
import { HelpPopoverProps } from './HelpPopover.js';

interface SwitchOption {
  value: boolean;
  label?: string;
  helpIconProps?: LabelProps["helpIconProps"];
}
interface InlineProps {
  label: string;
  description: string;
  embedIcon?: React.FC;
  width?: number;
  height?: number;
  elementSelector?: string;
  dynamicHeight?: SwitchOption;
  hideTitle?: SwitchOption;
  alignContentLeft?: SwitchOption;
  transparentBackground?: SwitchOption;
}
interface FloatingPopupProps {
  label: string;
  description: string;
  embedIcon?: React.FC;
  btnText?: string;
  btnColor?: string;
  btnTextColor?: string;
  btnPosition?: string;
  icon?: React.FC;
  showIcon?: boolean;
}
interface ElementPopupProps {
  label: string;
  description: string;
  embedIcon?: React.FC;
  elementSelector?: string;
}
interface IframeProps {
  label: string;
  description: string;
  embedIcon?: React.FC;
  width?: number;
  height?: number;
  iframeUrl?: string;
  iframeTitle?: string;
  dynamicHeight?: SwitchOption;
  hideTitle?: SwitchOption;
  alignContentLeft?: SwitchOption;
  transparentBackground?: SwitchOption;
}
type CodeSampleType = "html" | "react";
/**
 *
 * A component to generate and display the embed code for a product, which can then
 *
 * be pasted into a host application where the product should be embedded. Please
 *
 * note that this component does not embed the product itself but provides the
 *
 * necessary code and a preview to facilitate embedding.
 *
 * Here’s how you can use the ProductEmbed component in your React application:
 *
 * @example 
 *
 * import ProductEmbed from "@bigbinary/neeto-molecules/ProductEmbed";
 * 
 * const EmbedPage = () => (
 *   <ProductEmbed
 *     id="123"
 *     goBackLink="/share"
 *     options={{
 *       inline: {
 *         label: "Inline",
 *         description: "An inline component",
 *         width: 90,
 *         height: 100,
 *         elementSelector: "#inline-embed",
 *         dynamicHeight: {
 *           value: true,
 *           label: "Dynamic Height",
 *           helpIconProps: {
 *             popoverProps: {
 *               title: "Dynamic Height",
 *               description: "Dynamic Height help text",
 *             },
 *           },
 *         },
 *         hideTitle: { value: true },
 *         alignContentLeft: { value: true },
 *         transparentBackground: { value: false },
 *       },
 *       floatingPopup: {
 *         label: "Floating Popup",
 *         description: "A floating popup",
 *         btnText: "Schedule meeting",
 *         showIcon: true,
 *         icon: Calendar,
 *       },
 *       elementPopup: {
 *         label: "Element Popup",
 *         description: "An element popup",
 *         elementSelector: "element-id",
 *       },
 *       iframe: {
 *         label: "Iframe",
 *         description: "An iframe embed",
 *         width: 100,
 *         height: 100,
 *         dynamicHeight: {
 *           value: true,
 *           label: "Dynamic Height",
 *           helpIconProps: {
 *             popoverProps: {
 *               title: "Dynamic Height",
 *               description: "Dynamic Height help text",
 *             },
 *           },
 *         },
 *         hideTitle: { value: true },
 *         alignContentLeft: { value: true },
 *         transparentBackground: { value: false },
 *       },
 *     }}
 *     isQueryParamsEnabled={true}
 *     supportedLanguages={["html", "react"]}
 *   />
 * );
 * 
 * export default EmbedPage;
 * @endexample
*/
declare const ProductEmbed: React.FC<{
  title?: string;
  titleHelpPopoverProps?: HelpPopoverProps;
  subTitleHelpPopoverProps?: HelpPopoverProps;
  className?: string;
  goBackLink?: string;
  customEmbedScriptPath?: string;
  customPreviewIframeUrl?: string;
  extraArgs?: object;
  id: string;
  options?: {
    inline?: InlineProps;
    floatingPopup?: FloatingPopupProps;
    elementPopup?: ElementPopupProps;
    iframe?: IframeProps;
  };
  isQueryParamsEnabled?: boolean;
  queryParamsProps?: {
    label?: string;
    helpPopoverProps?: HelpPopoverProps;
    keyPlaceholder?: string;
    valuePlaceholder?: string;
    addButtonLabel?: string;
  };
  otherCustomizations?: Function;
  inlineWrapperStyle?: string;
  iframeStyle?: string;
  supportedLanguages?: CodeSampleType[];
}>;

export { ProductEmbed as default };