import { Lang } from "@/constants/languages"

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

import { type ContactNode, Section } 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, idx) => {
        switch (section.__typename) {
          case Section.ContactBlockSectionsExtraInfo:
            return <p>{section.extra_info.text}</p>
          case Section.ContactBlockSectionsMailingAddress:
            return (
              <p key={`section-mail-${idx}`}>
                {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}
                key={`section-phone-${idx}`}
              >
                <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} key={`section-heading-${idx}`}>
                {section.title.text}
              </h2>
            )
          case Section.ContactBlockSectionsVisitingAddress:
            return (
              <p key={`section-visiting-address-${idx}`}>
                {visitingAddressMessage}: {section.visiting_address.street}{" "}
              </p>
            )
          default:
            return null
        }
      })}
    </section>
  )
}

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