import {
  json,
  type LoaderFunctionArgs,
  type MetaFunction,
} from "@remix-run/node"
import { useLoaderData } from "@remix-run/react"
import React, { useState } from "react"
import coerceSemver from "semver/functions/coerce"
import versionAtLeast from "semver/functions/gte"
import UAParser from "ua-parser-js"
import { usePush } from "remix-pwa-monorepo/packages/push/client/hook"

export const meta: MetaFunction = () => {
  return [
    { title: "Tack Up Now!" },
    { name: "description", content: "Get equinelive notifications" },
  ]
}

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const userAgent = request.headers.get("user-agent")
  const os = new UAParser(userAgent ?? "").getOS()
  const isSupported =
    os.name !== "iOS" ||
    versionAtLeast(coerceSemver(os.version) ?? "0.0.0", "16.4.0")

  return json({ isSupported })
}

export default function Index() {
  const { isSupported } = useLoaderData<typeof loader>()

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <LandingMessage isSupported={isSupported} />
    </div>
  )
}

function LandingMessage({ isSupported }: { isSupported: boolean }) {
  const isClient = typeof window !== "undefined"
  const notificationsEnabled =
    isClient &&
    "Notification" in window &&
    window.Notification.permission === "granted"

  const isRunningPWA =
    isClient &&
    (("standalone" in navigator && (navigator.standalone as boolean)) ||
      matchMedia("(dislay-mode: standalone)").matches)

  const [isInstalled, setIsInstalled] = useState(notificationsEnabled)

  return !isClient ? (
    <div>Loading</div>
  ) : isInstalled ? (
    <div>Your Notifications</div>
  ) : isRunningPWA && !notificationsEnabled ? (
    <EnableButton onSubscribe={() => setIsInstalled(true)} />
  ) : isSupported ? (
    "Install Tack Up Now!"
  ) : (
    "Sorry, your device doesn't support Tack Up Now! :("
  )
}

function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
  const { subscribeToPush, requestPermission } = usePush()

  return <button onClick={subscribe}>Enable notifications</button>

  async function subscribe() {
    console.log("Hey the thing was clicked wow")
    subscribeToPush("Derpderp", (subscription) => {
      fetch("/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
      })
      onSubscribe()
    })
  }
}