"use client"

import { cx } from "class-variance-authority"
import NextLink from "next/link"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackClick } from "@scandic-hotels/tracking/base"

import { MarqueeText } from "@/components/MarqueeText"

import styles from "./campaignBanner.module.css"

import type { CampaignBannerProps } from "./types"

export function MobileCampaignBanner({
  tag,
  text,
  link,
  bookingCode,
}: CampaignBannerProps) {
  const intl = useIntl()

  return (
    <InnerContent link={link} bookingCode={bookingCode}>
      {bookingCode ? (
        <p>
          <Typography variant="Title/Overline/sm">
            <span className={cx(styles.tag, styles.withBookingCode)}>
              {tag}
            </span>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <span>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              <> ∙ {text} </>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span className={styles.bookingCode}>
                  {intl.formatMessage(
                    {
                      id: "campaignBanner.codeWithBookingCode",
                      defaultMessage: "Code: {bookingCode}",
                    },
                    { bookingCode }
                  )}
                  <MaterialIcon
                    icon="arrow_forward"
                    color="CurrentColor"
                    size={16}
                  />
                </span>
              </Typography>
            </span>
          </Typography>
        </p>
      ) : (
        <>
          <Typography variant="Tag/sm">
            <span className={styles.tag}>{tag}</span>
          </Typography>
          <MarqueeText
            backgroundColor="var(--Surface-Brand-Primary-3-Default)"
            className={styles.marquee}
            textWrapperClassName={styles.marqueeText}
          >
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <span>{text}</span>
            </Typography>
            {link ? (
              <Typography variant="Link/sm">
                <span>
                  {link.title ||
                    intl.formatMessage({
                      id: "common.readMore",
                      defaultMessage: "Read more",
                    })}
                </span>
              </Typography>
            ) : null}
          </MarqueeText>
        </>
      )}
    </InnerContent>
  )
}

function InnerContent({
  link,
  bookingCode,
  children,
}: React.PropsWithChildren<Pick<CampaignBannerProps, "link" | "bookingCode">>) {
  return link ? (
    <NextLink
      href={link.url}
      className={cx(styles.innerContent, {
        [styles.withBookingCode]: !!bookingCode,
      })}
      onClick={() => trackClick("BW campaign banner")}
    >
      {children}
    </NextLink>
  ) : (
    <div
      className={cx(styles.innerContent, {
        [styles.withBookingCode]: !!bookingCode,
      })}
    >
      {children}
    </div>
  )
}