<script lang="ts">
  import {goto} from "$app/navigation"
  import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
  import {
    session,
    userFollows,
    deriveUserWotScore,
    deriveProfile,
    deriveHandleForPubkey,
    displayHandle,
    deriveProfileDisplay,
  } from "@welshman/app"
  import Icon from "@lib/components/Icon.svelte"
  import Link from "@lib/components/Link.svelte"
  import Button from "@lib/components/Button.svelte"
  import Avatar from "@lib/components/Avatar.svelte"
  import WotScore from "@lib/components/WotScore.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
  import ProfileInfo from "@app/components/ProfileInfo.svelte"
  import ChatEnable from "@app/components/ChatEnable.svelte"
  import {canDecrypt, pubkeyLink} from "@app/state"
  import {pushModal} from "@app/modal"
  import {makeChatPath} from "@app/routes"

  export let pubkey

  const profile = deriveProfile(pubkey)
  const profileDisplay = deriveProfileDisplay(pubkey)
  const handle = deriveHandleForPubkey(pubkey)
  const score = deriveUserWotScore(pubkey)

  const back = () => history.back()

  const chatPath = makeChatPath([pubkey])

  const openChat = () => ($canDecrypt ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))

  $: following =
    pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
</script>

<div class="column gap-4">
  <div class="flex max-w-full gap-3">
    <span class="py-1">
      <Avatar src={$profile?.picture} size={10} />
    </span>
    <div class="flex min-w-0 flex-col">
      <div class="flex items-center gap-2">
        <span class="text-bold overflow-hidden text-ellipsis">
          {$profileDisplay}
        </span>
        <WotScore score={$score} active={following} />
      </div>
      <div class="overflow-hidden text-ellipsis text-sm opacity-75">
        {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
      </div>
    </div>
  </div>
  <ProfileInfo {pubkey} />
  <ModalFooter>
    <Button on:click={back} class="btn btn-link">
      <Icon icon="alt-arrow-left" />
      Go back
    </Button>
    <div class="flex gap-2">
      <Link external href={pubkeyLink(pubkey)} class="btn btn-neutral">
        <Icon icon="user-circle" />
        See Complete Profile
      </Link>
      <Button on:click={openChat} class="btn btn-primary">
        <Icon icon="letter" />
        Open Chat
      </Button>
    </div>
  </ModalFooter>
</div>
