import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"

import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

import type { ContactInformationProps } from "@/types/components/hotelPage/sidepeek/aboutTheHotel"
import { Country } from "@/types/enums/country"

export default async function ContactInformation({
  hotelAddress,
  coordinates,
  contact,
  socials,
  ecoLabels,
}: ContactInformationProps) {
  const intl = await getIntl()
  const lang = await getLang()
  const { latitude, longitude } = coordinates
  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`

  return (
    <div className={styles.wrapper}>
      <Subtitle color="burgundy" asChild>
        <Title level="h3">
          {intl.formatMessage({
            defaultMessage: "Practical information",
          })}
        </Title>
      </Subtitle>
      <div className={styles.information}>
        <div className={styles.address}>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "Address",
            })}
          </Body>
          <Body color="uiTextHighContrast">{hotelAddress.streetAddress}</Body>
          <Body color="uiTextHighContrast">{hotelAddress.city}</Body>
        </div>
        <div className={styles.drivingDirections}>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "Driving directions",
            })}
          </Body>
          <Link
            href={directionsUrl}
            target="_blank"
            color="Text/Interactive/Secondary"
            textDecoration="underline"
          >
            {intl.formatMessage({
              defaultMessage: "Google Maps",
            })}
          </Link>
        </div>
        <div className={styles.contact}>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "Contact us",
            })}
          </Body>
          <Body>
            <Link
              href={`tel:+${contact.phoneNumber}`}
              color="Text/Interactive/Secondary"
              textDecoration="underline"
            >
              {contact.phoneNumber}
            </Link>
          </Body>
          {hotelAddress.country === Country.Finland ? (
            <Caption>
              {intl.formatMessage({
                defaultMessage: "Price 0,16 €/min + local call charges",
              })}
            </Caption>
          ) : null}
        </div>
        <div className={styles.socials}>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "Follow us",
            })}
          </Body>
          <div className={styles.socialIcons}>
            {socials.instagram && (
              <Link href={socials.instagram}>
                <InstagramIcon color="Icon/Interactive/Default" />
              </Link>
            )}
            {socials.facebook && (
              <Link href={socials.facebook}>
                <FacebookIcon color="Icon/Interactive/Default" />
              </Link>
            )}
          </div>
        </div>
        <div className={styles.email}>
          <Body textTransform="bold">
            {intl.formatMessage({
              defaultMessage: "Email",
            })}
          </Body>
          <Link
            href={`mailto:${contact.email}`}
            color="Text/Interactive/Secondary"
            textDecoration="underline"
          >
            {contact.email}
          </Link>
        </div>
        {ecoLabels.nordicEcoLabel && (
          <div className={styles.ecoLabel}>
            <Image
              height={38}
              width={38}
              alt={intl.formatMessage({
                defaultMessage: "Nordic Swan Ecolabel",
              })}
              src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
            />
            <div>
              <Caption color="uiTextPlaceholder">
                {intl.formatMessage({
                  defaultMessage: "Nordic Swan Ecolabel",
                })}
              </Caption>
              <Caption color="uiTextPlaceholder">
                {ecoLabels.svanenEcoLabelCertificateNumber}
              </Caption>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
