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

import { countriesMap } from "@/constants/countries"
import { Lang, languages } from "@/constants/languages"
import { profileEdit } from "@/constants/routes/myPages"
import { getProfile } from "@/lib/trpc/memoizedRequests"

import CommunicationSlot from "@/components/MyPages/myprofile/communication/communication"
import CreditCardSlot from "@/components/MyPages/myprofile/creditCards/creditCards"
import Header from "@/components/Profile/Header"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isValidCountry } from "@/utils/countries"
import { isValidLang } from "@/utils/languages"

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

export default async function Profile() {
  const intl = await getIntl()
  const lang = getLang()
  const user = await getProfile()
  if (!user || "error" in user) {
    return null
  }

  const addressParts = []
  if (user.address.streetAddress) {
    addressParts.push(user.address.streetAddress)
  }

  if (user.address.city) {
    addressParts.push(user.address.city)
  }

  const displayNames = {
    language: new Intl.DisplayNames([lang], { type: "language" }),
    region: new Intl.DisplayNames([lang], { type: "region" }),
  }

  if (user.address.country) {
    const countryCode = isValidCountry(user.address.country)
      ? countriesMap[user.address.country]
      : null
    const localizedCountry = countryCode
      ? displayNames.region.of(countryCode)
      : user.address.country
    addressParts.push(localizedCountry)
  }

  const addressOutput =
    addressParts.length > 0
      ? addressParts.join(", ")
      : intl.formatMessage({ id: "N/A" })

  const userLang = isValidLang(user.language) ? user.language : Lang.en
  const localizedLanguage = displayNames.language.of(userLang)
  const normalizedLanguage = localizedLanguage
    ? localizedLanguage.charAt(0).toUpperCase() + localizedLanguage.slice(1)
    : languages[userLang]

  return (
    <>
      <section className={styles.container}>
        <Header>
          <div>
            <Title as="h4" color="red" level="h1" textTransform="capitalize">
              {intl.formatMessage({ id: "Welcome" })}
            </Title>
            <Title
              data-hj-suppress
              as="h4"
              color="burgundy"
              level="h2"
              textTransform="capitalize"
            >
              {user.name}
            </Title>
          </div>
          <Button asChild intent="primary" size="small" theme="base">
            <Link prefetch={false} color="none" href={profileEdit[lang]}>
              {intl.formatMessage({ id: "Edit profile" })}
            </Link>
          </Button>
        </Header>
        <div className={styles.profile}>
          <div className={styles.info}>
            <div className={styles.item}>
              <MaterialIcon
                icon="calendar_month"
                color="Icon/Interactive/Default"
              />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Date of Birth" })}
              </Body>
              <Body color="burgundy">{user.dateOfBirth}</Body>
            </div>
            <div className={styles.item}>
              <MaterialIcon icon="phone" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Phone number" })}
              </Body>
              <Body color="burgundy">{user.phoneNumber}</Body>
            </div>
            <div className={styles.item}>
              <MaterialIcon icon="globe" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Language" })}
              </Body>
              <Body color="burgundy">{normalizedLanguage}</Body>
            </div>
            <div className={styles.item}>
              <MaterialIcon icon="mail" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Email" })}
              </Body>
              <Body color="burgundy">{user.email}</Body>
            </div>
            <div className={styles.item}>
              <MaterialIcon
                icon="location_on"
                color="Icon/Interactive/Default"
              />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Address" })}
              </Body>
              <Body color="burgundy">{addressOutput}</Body>
            </div>
            <div className={styles.item}>
              <MaterialIcon icon="lock" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Password" })}
              </Body>
              <Body color="burgundy">**********</Body>
            </div>
          </div>
        </div>
        <Divider color="burgundy" opacity={8} />
        <CreditCardSlot />
        {/* <MembershipCardSlot /> */}
        <CommunicationSlot />
      </section>
    </>
  )
}
