import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getProfileSafely } from "@/lib/trpc/memoizedRequests"

import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { getIntl } from "@/i18n"

import { TransferPointsFormClient } from "./TransferPointsFormClient"

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

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

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
export async function TransferPointsForm({ lang }: { lang: Lang }) {
  const profile = await getProfileSafely()
  const scandicPoints = profile?.membership?.currentPoints ?? 0

  // TODO get from api
  await wait(1_000)
  const sasPoints = 250_000
  const exchangeRate = 2

  return (
    <TransferPointsFormContent
      sasPoints={sasPoints}
      scandicPoints={scandicPoints}
      exchangeRate={exchangeRate}
      lang={lang}
    />
  )
}

export async function TransferPointsFormSkeleton({ lang }: { lang: Lang }) {
  return (
    <TransferPointsFormContent
      sasPoints={null}
      scandicPoints={null}
      exchangeRate={null}
      lang={lang}
    />
  )
}

async function TransferPointsFormContent({
  sasPoints,
  scandicPoints,
  exchangeRate,
  lang,
}: {
  sasPoints: number | null
  scandicPoints: number | null
  exchangeRate: number | null
  lang: Lang
}) {
  const intl = await getIntl()

  return (
    <div className={styles.container}>
      <section className={styles.card}>
        <div className={styles.highFive}>
          <Image
            src="/_static/img/scandic-high-five.svg"
            alt=""
            width="111"
            height="139"
            sizes="100vw"
          />
        </div>
        <div className={styles.transferContainer}>
          <div className={styles.transferFrom}>
            <div>
              <div className={styles.labelWithIcon}>
                <Typography variant="Tag/sm">
                  <p>{intl.formatMessage({ id: "Transfer from" })}</p>
                </Typography>
                <MaterialIcon icon="upload" />
              </div>
              <Typography variant="Title/Subtitle/md">
                <p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
              </Typography>
            </div>
            <div>
              <Typography variant="Tag/sm">
                <p className={styles.balanceLabel}>
                  {intl.formatMessage({ id: "Balance" })}
                </p>
              </Typography>
              {sasPoints === null ? (
                <SkeletonShimmer width="10ch" height="20px" />
              ) : (
                <Typography variant="Body/Paragraph/mdRegular">
                  <p>
                    {intl.formatMessage(
                      { id: "{points, number} p" },
                      { points: sasPoints }
                    )}
                  </p>
                </Typography>
              )}
            </div>
          </div>
          <div className={styles.noPointsWarning}>
            {sasPoints === 0 && (
              <Typography variant="Body/Paragraph/mdRegular">
                <p>
                  {intl.formatMessage({
                    id: "You have no points to transfer.",
                  })}
                </p>
              </Typography>
            )}
          </div>
          <div className={styles.transferTo}>
            <div>
              <div className={styles.labelWithIcon}>
                <MaterialIcon icon="download" />
                <Typography variant="Tag/sm">
                  <p>{intl.formatMessage({ id: "Transfer to" })}</p>
                </Typography>
              </div>
              <Typography variant="Title/Subtitle/md">
                <p>{intl.formatMessage({ id: "Scandic Friends" })}</p>
              </Typography>
            </div>
            <div>
              <Typography variant="Tag/sm">
                <p className={styles.balanceLabel}>
                  {intl.formatMessage({ id: "Balance" })}
                </p>
              </Typography>
              {scandicPoints === null ? (
                <SkeletonShimmer width="10ch" height="20px" />
              ) : (
                <Typography variant="Body/Paragraph/mdRegular">
                  <p>
                    {intl.formatMessage(
                      { id: "{points, number} p" },
                      { points: scandicPoints }
                    )}
                  </p>
                </Typography>
              )}
            </div>
          </div>
        </div>
        <TransferPointsFormClient
          sasPoints={sasPoints}
          exchangeRate={exchangeRate}
          lang={lang}
        />
      </section>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p style={{ color: "var(--Text-Tertiary)" }}>
          {intl.formatMessage({
            id: "Transferred points will not be level qualifying",
          })}
        </p>
      </Typography>
    </div>
  )
}