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

import { langEnum } from "@/types/lang"
import type { Lang } from "@/types/lang"
import { Section, type ContactNode } from "@/types/requests/asides/contact"

export default function Contact({ sections, system: { locale } }: ContactNode) {
  if (!sections.length) {
    return null
  }

  const visitingAddressMessage = getVisitingAddressMessage(locale)
  return (
    <section>
      {sections.map((section) => {
        switch (section.__typename) {
          case Section.ContactBlockSectionsExtraInfo:
            return <p>{section.extra_info.text}</p>
          case Section.ContactBlockSectionsMailingAddress:
            return (
              <p>
                {section.mailing_address.name}
                <br />
                {section.mailing_address.street}
                <br />
                {section.mailing_address.zip} {section.mailing_address.city}
                <br />
                {section.mailing_address.country}
              </p>
            )
          case Section.ContactBlockSectionsPhone:
            return (
              <div className={styles.highlightBlock}>
                <h3>{section.phone.title}</h3>
                <div className={styles.phoneContainer}>
                  <svg
                    focusable="false"
                    className={styles.phoneIcon}
                    viewBox="0 0 32 32"
                  >
                    <use
                      xmlnsXlink="http://www.w3.org/1999/xlink"
                      xlinkHref="/_static/img/icons/sprites.svg#icon-phone"
                    ></use>
                  </svg>

                  <a
                    href={`tel:+${section.phone.number}`}
                    itemProp="telephone"
                    className={styles.phoneNumberLink}
                  >
                    +{section.phone.number}
                  </a>
                </div>
              </div>
            )
          case Section.ContactBlockSectionsTitle:
            return <h2 className={styles.heading}>{section.title.text}</h2>
          case Section.ContactBlockSectionsVisitingAddress:
            return (
              <p>
                {visitingAddressMessage}: {section.visiting_address.street}{" "}
              </p>
            )
          default:
            return null
        }
      })}
    </section>
  )
}

function getVisitingAddressMessage(lang: Lang) {
  switch (lang) {
    case langEnum.sv:
      return "Besöksadress"
    case langEnum.en:
      return "Visiting address"
    case langEnum.da:
      return "Besøgsadresse"
    case langEnum.de:
      return "Besuchsadresse"
    case langEnum.fi:
      return "Vierailuosoite"
    case langEnum.no:
      return "Besøksadresse"
    default:
      return ""
  }
}
