"use client"

import Body from "@scandic-hotels/design-system/Body"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import Link from "../Link"
import AlertSidepeek from "./Sidepeek"
import { IconByAlertType } from "./utils"
import { alertVariants } from "./variants"

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

import type { AlertProps } from "./alert"

export default function Alert({
  className,
  variant,
  type,
  heading,
  text,
  link,
  close,
  phoneContact,
  sidepeekCtaText,
  sidepeekContent,
  ariaLive,
  ariaRole,
}: AlertProps) {
  const classNames = alertVariants({
    className,
    variant,
    type,
  })

  if (!text && !heading) {
    return null
  }
  return (
    <section className={classNames} role={ariaRole} aria-live={ariaLive}>
      <div className={styles.content}>
        <span className={styles.iconWrapper}>
          <IconByAlertType
            alertType={type}
            className={styles.icon}
            variant={variant}
          />
        </span>
        <div className={styles.innerContent}>
          <div className={styles.textWrapper}>
            {heading ? (
              <Body textTransform="bold" asChild>
                <h2>{heading}</h2>
              </Body>
            ) : null}
            {text ? (
              <Body>
                {text}
                {phoneContact?.phoneNumber ? (
                  <>
                    <span> {phoneContact.displayText} </span>
                    <Link
                      href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
                    >
                      {phoneContact.phoneNumber}
                    </Link>
                    {phoneContact.footnote ? (
                      <>
                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                        <span>. ({phoneContact.footnote})</span>
                      </>
                    ) : null}
                  </>
                ) : null}
              </Body>
            ) : null}
          </div>

          {link ? (
            <Link
              textDecoration="underline"
              href={link.url}
              keepSearchParams={link.keepSearchParams}
            >
              {link.title}
            </Link>
          ) : null}
          {!link && sidepeekCtaText && sidepeekContent ? (
            <AlertSidepeek
              ctaText={sidepeekCtaText}
              sidePeekContent={sidepeekContent}
            />
          ) : null}
        </div>
        {close ? (
          <Button onPress={close} variant="Text" className={styles.closeButton}>
            <MaterialIcon icon="close" color="CurrentColor" />
          </Button>
        ) : null}
      </div>
    </section>
  )
}
