import {
  Body,
  Head,
  Html,
  Preview,
  Tailwind,
  Text,
  render,
} from '@react-email/components';

import { BodyStyle } from '../components/body-style';
import CommonFooter from '../components/common-footer';
import { EmailContent } from '../components/content';
import { EmailHeader } from '../components/header';
import { EmailHeading } from '../components/heading';
import { EmailWrapper } from '../components/wrapper';
import { initializeEmailI18n } from '../lib/i18n';

export async function renderOrderProcessingEmail({
  language,
  recipientName,
  partnerLocation,
  isUrine,
}: {
  language: string;
  recipientName: string;
  partnerLocation: string;
  isUrine?: boolean;
}) {
  const namespace = 'order-processing-email';

  const { t } = await initializeEmailI18n({
    language,
    namespace: [namespace, 'common'],
  });

  const previewText = t(`${namespace}:previewText`);

  const subject = t(`${namespace}:subject`);

  const p2 = t(`${namespace}:p2`);
  const p4 = t(`${namespace}:p4`);
  const p1Urine = t(`${namespace}:p1Urine`);

  const html = await render(
    <Html>
      <Head>
        <BodyStyle />
      </Head>

      <Preview>{previewText}</Preview>

      <Tailwind>
        <Body>
          <EmailWrapper>
            <EmailContent>
              <EmailHeader>
                <EmailHeading>{previewText}</EmailHeading>
              </EmailHeader>
              <Text className="text-[16px] leading-[24px] text-[#242424]">
                {t(`common:helloName`, { name: recipientName })}
              </Text>
              <Text className="text-[16px] leading-[24px] font-semibold text-[#242424]">
                {t(`${namespace}:heading`)}
              </Text>
              <Text>{t(`${namespace}:p1`, { partnerLocation })}</Text>
              <Text dangerouslySetInnerHTML={{ __html: p2 }}></Text>
              <Text>{t(`${namespace}:p3`)}</Text>
              <Text dangerouslySetInnerHTML={{ __html: p4 }}></Text>
              {isUrine && (
                <>
                  <Text dangerouslySetInnerHTML={{ __html: p1Urine }}></Text>
                  <Text>{t(`${namespace}:p2Urine`)}</Text>
                </>
              )}
              <Text>{t(`${namespace}:p5`)}</Text>
              <Text>{t(`${namespace}:p6`)}</Text>
              <CommonFooter t={t} />
            </EmailContent>
          </EmailWrapper>
        </Body>
      </Tailwind>
    </Html>,
  );

  return {
    html,
    subject,
  };
}
