import { dt } from "@/lib/dt"
import { serverClient } from "@/lib/trpc/server"

import {
  CalendarIcon,
  EmailIcon,
  HouseIcon,
  PhoneIcon,
} from "@/components/Icons"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
import { getIntl } from "@/i18n"

import Field from "../Field"
import Container from "./Container"

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

export default async function Profile() {
  const { formatMessage } = await getIntl()
  const user = await serverClient().user.get()
  const countryName = countries.find(
    (country) => country.code === user.address.country
  )
  const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
  return (
    <Container user={user}>
      <section className={styles.info}>
        <Field>
          <Field.Icon>{user.address.country}</Field.Icon>
          <Field.TextLabel>{formatMessage({ id: "Country" })}</Field.TextLabel>
          <Field.Content>{countryName?.name}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <CalendarIcon />
          </Field.Icon>
          <Field.TextLabel>
            {formatMessage({ id: "Date of Birth" })}
          </Field.TextLabel>
          <Field.Content>{dob}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <EmailIcon />
          </Field.Icon>
          <Field.TextLabel>{formatMessage({ id: "Email" })}</Field.TextLabel>
          <Field.Content>{user.email}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <PhoneIcon />
          </Field.Icon>
          <Field.TextLabel>
            {formatMessage({ id: "Phone number" })}
          </Field.TextLabel>
          <Field.Content>{user.phoneNumber}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{formatMessage({ id: "Address" })}</Field.TextLabel>
          <Field.Content>{user.address.streetAddress || "-"}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>
            {formatMessage({ id: "City/State" })}
          </Field.TextLabel>
          <Field.Content>{user.address.city || "-"}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{formatMessage({ id: "Zip code" })}</Field.TextLabel>
          <Field.Content>{user.address.zipCode}</Field.Content>
        </Field>
      </section>
    </Container>
  )
}