import { languageSelect } from "@/constants/languages"
import { profileEdit } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"

import {
  CalendarIcon,
  EmailIcon,
  GlobeIcon,
  LocationIcon,
  LockIcon,
  PhoneIcon,
} from "@/components/Icons"
import Header from "@/components/Profile/Header"
import Button from "@/components/TempDesignSystem/Button"
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 styles from "./page.module.css"

import type { LangParams, PageArgs } from "@/types/params"

export default async function Profile({ params }: PageArgs<LangParams>) {
  const { formatMessage } = await getIntl()
  const user = await serverClient().user.get()
  if (!user) {
    return null
  }
  const language = languageSelect.find((l) => l.value === user.language)
  return (
    <>
      <Header>
        <hgroup>
          <Title as="h4" color="red" level="h1">
            {formatMessage({ id: "Welcome" })}
          </Title>
          <Title as="h4" color="burgundy" level="h2">
            {user.name}
          </Title>
        </hgroup>
        <Button asChild intent="primary" size="small" theme="base">
          <Link color="none" href={profileEdit[params.lang]}>
            {formatMessage({ id: "Edit profile" })}
          </Link>
        </Button>
      </Header>
      <section className={styles.profile}>
        <article className={styles.info}>
          <div className={styles.item}>
            <CalendarIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Date of birth" })}
            </Body>
            <Body color="burgundy">{user.dateOfBirth}</Body>
          </div>
          <div className={styles.item}>
            <PhoneIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Phone number" })}
            </Body>
            <Body color="burgundy">{user.phoneNumber}</Body>
          </div>
          <div className={styles.item}>
            <GlobeIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Language" })}
            </Body>
            <Body color="burgundy">{language?.label ?? "N/A"}</Body>
          </div>
          <div className={styles.item}>
            <EmailIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Email" })}
            </Body>
            <Body color="burgundy">{user.email}</Body>
          </div>
          <div className={styles.item}>
            <LocationIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Address" })}
            </Body>
            <Body color="burgundy">
              {user.address.streetAddress
                ? `${user.address.streetAddress}, `
                : ""}
              {user.address.city ? `${user.address.city}, ` : ""}
              {user.address.country ? `${user.address.country}` : ""}
              {!user.address.streetAddress &&
              !user.address.city &&
              !user.address.country
                ? "N/A"
                : null}
            </Body>
          </div>
          <div className={styles.item}>
            <LockIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Password" })}
            </Body>
            <Body color="burgundy">**********</Body>
          </div>
        </article>
      </section>
    </>
  )
}
