import { useRef } from 'react';

import type { FormApi } from '~/src/components/Form';
import type { PageSectionComponent } from '../types';
import type {
  NewsletterSectionProps,
  NewsletterSubscribeParams,
} from './types';

import Box from '~/src/components/Box';
import OutlineButton from '~/src/components/Button/OutlineButton';
import { MarketingConsent } from '~/src/components/MarketingConsent';
import { useAppToast } from '~/src/components/NextApp/lib/CoreUi';
import { useI18n } from '~/src/lib/i18n';
import { reportErrorClient } from '~/src/lib/sentry/client';
import { sendMarketingConsentApi } from '~/src/lib/songwhipApi/orchard';
import { resolveArtistName } from '~/src/lib/utils/resolveArtistName';
import { useSelector } from '~/src/store/redux';
import { selectUserCountry } from '~/src/store/session/selectors';
import { MAX_CONTENT_WIDTH } from '../../constants';
import { useEmitter } from '../../hooks/useEmitter';
import SectionTitle from '../lib/SectionTitle';
import { NewsletterLegalFootnote } from './components';
import { toMarketingConsentBody } from './utils';

export const NewsletterSectionView: PageSectionComponent<
  NewsletterSectionProps
> = ({ title, layoutData }) => {
  const { t: tApp } = useI18n('app');
  const { t } = useI18n('item');

  const userCountry = useSelector(selectUserCountry);
  const formApiRef = useRef<FormApi>(null);
  const appToast = useAppToast();
  const emitter = useEmitter();
  const { item } = layoutData;
  const artistName = resolveArtistName(item);

  const subscribeToNewsletter = (params: NewsletterSubscribeParams) => {
    sendMarketingConsentApi({
      keepalive: true,
      ...toMarketingConsentBody(params),
    }).catch((error) => {
      // optimistic — never block the UI on this request
      reportErrorClient({ error });
    });
  };

  return (
    <Box testId="newsletterSection">
      {title && <SectionTitle margin="0 0 2rem" text={title} />}
      <Box isCentered maxWidth={MAX_CONTENT_WIDTH}>
        <Box style={{ position: 'relative', overflow: 'hidden' }}>
          <MarketingConsent
            formApiRef={formApiRef}
            artistName={artistName}
            title=""
            country={userCountry}
            checkboxesConfig={{ emailMarketing: { isRequired: true } }}
            onSubmit={({ formValues, userMarketingConsent }) => {
              subscribeToNewsletter({
                item,
                userCountry,
                formValues,
                userMarketingConsent,
              });

              emitter.emit('emailSubscription', { email: formValues.email });

              appToast({
                text: t('newsletterSection.subscribeSuccess'),
                timeoutSecs: 10,
              });

              formApiRef.current?.clear();
            }}
            renderFooter={({ render }) =>
              render(
                <>
                  <OutlineButton
                    isSubmit
                    height="5rem"
                    text={tApp('actions.subscribe')}
                  />
                  <NewsletterLegalFootnote
                    artistName={artistName}
                    country={userCountry}
                    brand={item.primaryOwnerAccount?.orchardBrand}
                  />
                </>
              )
            }
          />
        </Box>
      </Box>
    </Box>
  );
};