import { Fragment, useEffect } from 'react';
import { portalId } from '../../constants/leadinConfig';
import UISpacer from '../UIComponents/UISpacer';
import PreviewForm from './PreviewForm';
import FormSelect from './FormSelect';
import { IFormBlockProps } from '../../gutenberg/FormBlock/registerFormBlock';
import {
  usePostBackgroundMessage,
  useBackgroundAppContext,
} from '../../iframe/useBackgroundApp';
import { ProxyMessages } from '../../iframe/integratedMessages';
import LoadingBlock from '../Common/LoadingBlock';
import EmbedderContainer from '../Common/EmbedderContainer';

interface IFormEditProps extends IFormBlockProps {
  preview: boolean;
  origin: 'gutenberg' | 'elementor';
  fullSiteEditor?: boolean;
}

function FormEdit({
  attributes,
  isSelected,
  setAttributes,
  preview = true,
  origin = 'gutenberg',
  fullSiteEditor,
}: IFormEditProps) {
  const { formId, formName, embedVersion } = attributes;
  const formSelected = portalId && formId;

  const isBackgroundAppReady = useBackgroundAppContext();
  const monitorFormPreviewRender = usePostBackgroundMessage();

  const handleChange = (selectedForm: {
    value: string;
    label: string;
    embedVersion?: string;
  }) => {
    setAttributes({
      portalId,
      formId: selectedForm.value,
      formName: selectedForm.label,
      embedVersion: selectedForm.embedVersion,
    });
  };

  useEffect(() => {
    monitorFormPreviewRender({
      key: ProxyMessages.TrackFormPreviewRender,
      payload: {
        origin,
      },
    });
  }, [origin]);

  return !isBackgroundAppReady ? (
    <LoadingBlock />
  ) : (
    <Fragment>
      {(isSelected || !formSelected) && (
        <FormSelect
          formId={formId}
          formName={formName}
          handleChange={handleChange}
          origin={origin}
          embedVersion={embedVersion}
        />
      )}
      {formSelected && (
        <Fragment>
          {isSelected && <UISpacer />}
          {preview && (
            <PreviewForm
              portalId={portalId}
              formId={formId}
              fullSiteEditor={fullSiteEditor}
              embedVersion={embedVersion}
            />
          )}
        </Fragment>
      )}
    </Fragment>
  );
}

export default function FormEditContainer(props: IFormEditProps) {
  return (
    <EmbedderContainer>
      <FormEdit {...props} />
    </EmbedderContainer>
  );
}