import React from 'react';
import { HelpPopoverProps } from './HelpPopover.js';
import { EmailPreviewProps } from './EmailPreview.js';
import { HeaderProps } from './Header.js';
import { TooltipProps, SwitchProps } from '@bigbinary/neetoui';
import 'components/Header/constants';
import 'neetoui';
import './MoreDropdown.js';

type ContentVariables = {
  label: string;
  key: string;
};
type FieldOptions = {
  label: string;
  value: string;
};
type ReplyToFieldProps = {
  popoverProps?: HelpPopoverProps;
  options?: FieldOptions[];
};
type SendToFieldProps = {
  options?: FieldOptions[];
};
type EmailFormProps = {
  messageVariables?: ContentVariables[];
  subjectVariables?: ContentVariables[];
  handleCancel?: () => void;
  handleResetToDefault?: () => void;
  isLoading?: boolean;
  isResetting?: boolean;
  replyToOptions?: FieldOptions[];
  sendToOptions?: FieldOptions[];
  isUpdating?: boolean;
  showFields?: boolean;
  className?: string;
  replyToFieldProps?: ReplyToFieldProps;
  sendToFieldProps?: SendToFieldProps;
  showResetToDefaultButton?: boolean;
  editorRef?: React.Ref<HTMLDivElement>;
  editorAddons?: string[];
  defaultValues?: InitialValues;
};
interface ExtendedEmailPreviewProps extends EmailPreviewProps {
  formatBody?: () => void;
  formatSubject?: () => void;
  bodyVariables?: object;
  subjectVariables?: object;
}
interface InitialValues {
  sendTo?: string[];
  sendToId?: string;
  sendToCc?: string[];
  sendToBcc?: string[];
  replyTo?: string;
  showCopyEmails?: boolean;
  subject?: string;
  message?: string;
  isEnabled?: boolean;
}
/**
 *
 * This is a component used to create or edit an email template. It includes fields
 *
 * for defining the email subject, message, sender details, and recipient details.
 *
 * It also provides options to insert variables into the message and subject field,
 *
 * validate input, and handle save or cancel actions.
 *
 * The component works with a preview feature that shows how the email will look.
 *
 * When headerProps are provided, a "Preview email" button appears in the header
 *
 * that opens a modal displaying the email preview. The preview shows the current
 *
 * form values including subject, message, recipients, and reply-to information.
 *
 * ![image](https://github.com/user-attachments/assets/c8fd8e68-ddd2-4652-b3fb-175ac098e1a0|height=200|width=300)
 *
 * @example 
 *
 * import EmailForm from "@bigbinary/neeto-molecules/EmailForm";
 * 
 * const EmailComposer = () => {
 *   return (
 *     <EmailForm
 *       initialValues={{
 *         message: "Test Message",
 *         subject: "Test Subject",
 *       }}
 *       onSubmit={handleSubmit}
 *       showReplyToField={showReplyToField}
 *       showSendToField={showSendToField}
 *       showSendToAsRadio={showSendToAsRadio}
 *       formikProps={formikProps}
 *       validationSchema={validationSchema}
 *       switchProps={ name: "isEnabled", value: true }
 *       titleProps={ value: "Title" }
 *       headerProps={{
 *         size: "small",
 *         title: "Header",
 *         breadcrumbs: [
 *           { text: "First", link: "first-example" },
 *           { text: "Second", link: "second-example" },
 *           { text: "Third" },
 *         ],
 *         titleHelpPopoverProps: { title: "title help popover props" },
 *       }}
 *       mobilePreviewProps={{
 *         message: 'Preview Message',
 *         className: "neeto-ui-bg-gray-200 lg:hidden",
 *       }}
 *       emailFormProps={{
 *         messageVariables,
 *         subjectVariables,
 *         replyToFieldProps: {
 *           options: [
 *             {
 *               label: "Email Fugiat ratione nihil qui?",
 *               value: "no-reply@example.com",
 *             },
 *           ],
 *           popoverProps: {
 *             helpLinkProps: {
 *               label: "Help link",
 *               href: "https://help.neetoform.com/articles/reply-to-field-for-emails",
 *             },
 *           },
 *         },
 *         sendToFieldProps: { options: sendToOptions },
 *         sendToOptions,
 *       }}
 *       emailPreviewProps={{
 *         customContent: <Footer {...{ kind }} />,
 *         formatBody,
 *         formatSubject,
 *         bodyVariables,
 *         subjectVariables,
 *       }}
 *     />
 *   );
 * };
 * 
 * export default EmailComposer;
 * @endexample
*/
declare const EmailForm: React.FC<{
  onSubmit: FormikConfig<T>["onSubmit"];
  initialValues: InitialValues;
  formikProps?: {
    [key: string]: any;
  };
  validationSchema?: ValidationMap;
  showFields?: boolean;
  showSendToField?: boolean;
  showReplyToField?: boolean;
  showSendToAsRadio?: boolean;
  blockNavigation?: boolean;
  showCcField?: boolean;
  showBccField?: boolean;
  isLoading?: boolean;
  maxEmails?: number;
  emailFormProps?: EmailFormProps;
  emailPreviewProps?: Partial<ExtendedEmailPreviewProps>;
  headerProps?: HeaderProps;
  tooltipProps?: Partial<TooltipProps>;
  switchProps?: SwitchProps;
  mobilePreviewProps?: object;
  children?: React.ReactNode;
}>;

export { EmailForm as default };