<script lang="ts">
  import {fly} from "svelte/transition"
  import {ifLet} from "@welshman/lib"
  import {displayRelayUrl} from "@welshman/util"
  import Microphone from "@assets/icons/microphone.svg?dataurl"
  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
  import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
  import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import {displayRoom} from "@app/core/state"
  import RoomDetail from "@app/components/RoomDetail.svelte"
  import type {VoiceSession} from "@app/voice"
  import {currentVoiceSession, leaveVoiceRoom, toggleMute} from "@app/voice"
  import {pushModal} from "@app/util/modal"

  const roomName = $derived(
    $currentVoiceSession ? displayRoom($currentVoiceSession.url, $currentVoiceSession.h) : "",
  )
  const spaceName = $derived($currentVoiceSession ? displayRelayUrl($currentVoiceSession.url) : "")

  const showRoomDetail = () => {
    ifLet($currentVoiceSession, (session: VoiceSession) =>
      pushModal(RoomDetail, {url: session.url, h: session.h}),
    )
  }
</script>

{#if $currentVoiceSession}
  <div
    in:fly={{y: 60, duration: 350}}
    out:fly={{y: 60, duration: 250}}
    class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
    <div class="flex items-start justify-between gap-2">
      <div class="min-w-0 flex flex-col gap-0.5">
        <span class="text-sm font-semibold text-success">Voice Connected</span>
        <span class="ellipsize text-xs opacity-70">
          {roomName} / {spaceName}
        </span>
      </div>
      <Button class="btn btn-sm btn-square btn-ghost shrink-0" onclick={showRoomDetail}>
        <Icon icon={InfoCircle} size={4} />
      </Button>
    </div>
    <div class="flex items-center gap-1">
      <Button
        data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
        class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
          ? 'btn-error'
          : 'btn-ghost'}"
        onclick={toggleMute}>
        <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
      </Button>
      <Button
        data-tip="Leave room"
        class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
        onclick={leaveVoiceRoom}>
        <Icon icon={PhoneRounded} size={4} />
      </Button>
    </div>
  </div>
{/if}
