import type { PageSectionComponent } from '../types';
import type { FormSectionProps } from './types';

import songwhipApi from '~/lib/songwhipApi/songwhipApi';
import { useAppAlert } from '~/src/components/NextApp/lib/CoreUi';
import { useApiMutation } from '~/src/hooks/useApi';
import { useTracker } from '~/src/lib/tracker/useTracker';
import { Form } from '~/src/ui/components/form';
import { Section } from '~/src/ui/layouts/section';

export const FormSection: PageSectionComponent<FormSectionProps> = ({
  fields,
  submit,
  layoutData,
  formId,
  background,
  shadow,
}) => {
  const alert = useAppAlert();
  const { trackEvent } = useTracker();

  const { trigger } = useApiMutation(async (formData) => {
    await songwhipApi('forms/submit', {
      method: 'POST',
      body: {
        pageId: layoutData.item.id,
        pageType: layoutData.item.type,
        formId,
        formData,
      },
    });
  });

  const onSubmit = async (data: Record<string, unknown>) => {
    await trigger(data);

    trackEvent({ type: 'fan-form-submit', formId });

    alert({
      title: 'Form submitted',
      content: 'Thank you for submitting the form.',
    });
  };

  return (
    <Section variant={background} shadow={shadow}>
      <Form
        mode="onBlur"
        config={{ fields, submit: { ...submit } }}
        onSubmit={onSubmit}
      />
    </Section>
  );
};