<!--
  @component Renders a top bar with the user's profile picture and action buttons.
-->
<script lang="ts">
  import {ROUTE_DEFINITIONS} from '~/app/routing/routes';
  import ContextMenuProvider from '~/app/ui/components/hocs/context-menu-provider/ContextMenuProvider.svelte';
  import type {TopBarProps} from '~/app/ui/components/partials/conversation-nav/internal/top-bar/props';
  import type Popover from '~/app/ui/generic/popover/Popover.svelte';
  import {i18n} from '~/app/ui/i18n';
  import IconButton from '~/app/ui/svelte-components/blocks/Button/IconButton.svelte';
  import MdIcon from '~/app/ui/svelte-components/blocks/Icon/MdIcon.svelte';
  import ProfilePicture from '~/app/ui/svelte-components/threema/ProfilePicture/ProfilePicture.svelte';
  import type {SvelteNullableBinding} from '~/app/ui/utils/svelte';
  import {transformProfilePicture} from '~/common/dom/ui/profile-picture';

  const {
    initials,
    onclickprofilepicture,
    onclickreceiverlistbutton,
    onclicksettingsbutton,
    profilePicture,
    services,
  }: TopBarProps = $props();

  let popover: SvelteNullableBinding<Popover> = $state(null);
</script>

<header class="container">
  <button class="profile-picture" onclick={onclickprofilepicture} type="button">
    <ProfilePicture
      img={transformProfilePicture(profilePicture.picture)}
      alt={$i18n.t('contacts.hint--own-profile-picture')}
      {initials}
      color={profilePicture.color}
      shape="circle"
    />
  </button>

  <div class="actions">
    <!-- <IconButton flavor="naked" class="wip">
        <ThreemaIcon
          on:click={() => {
            dispatch('click-chat');
          }}
          theme="Outlined">start_chat</ThreemaIcon
        >
      </IconButton> -->

    <IconButton flavor="naked" onclick={onclickreceiverlistbutton}>
      <MdIcon theme="Outlined">person_outline</MdIcon>
    </IconButton>

    <ContextMenuProvider
      bind:popover
      anchorPoints={{
        reference: {
          horizontal: 'right',
          vertical: 'bottom',
        },
        popover: {
          horizontal: 'right',
          vertical: 'top',
        },
      }}
      items={[
        ...(import.meta.env.BUILD_VARIANT === 'consumer' ||
        import.meta.env.BUILD_ENVIRONMENT === 'sandbox'
          ? [
              {
                type: 'option',
                icon: {
                  name: 'person_add',
                  color: 'default',
                },
                label: $i18n.t('contacts.action--add-contact', 'New Contact'),
                handler: () =>
                  services.router.go({
                    nav: ROUTE_DEFINITIONS.nav.receiverList.withParams({
                      addressBookState: 'contact-add-form',
                    }),
                  }),
              } as const,
              {
                type: 'option',
                icon: {
                  name: 'group_add',
                  color: 'default',
                },
                label: $i18n.t('groups.action--add-group', 'New Group'),
                handler: () =>
                  services.router.go({
                    nav: ROUTE_DEFINITIONS.nav.receiverList.withParams({
                      addressBookState: 'group-add-form',
                    }),
                  }),
              } as const,
            ]
          : []),
        {
          type: 'option',
          icon: {
            name: 'settings',
            color: 'default',
          },
          label: $i18n.t('settings.label--title', 'Settings'),
          handler: onclicksettingsbutton ?? (() => {}),
        },
      ]}
      offset={{
        left: 0,
        top: 4,
      }}
      onclickitem={() => popover?.close()}
      triggerBehavior="toggle"
    >
      <IconButton flavor="naked">
        <MdIcon theme="Outlined">more_vert</MdIcon>
      </IconButton>
    </ContextMenuProvider>
  </div>
</header>

<style lang="scss">
  @use 'component' as *;

  $-profile-picture-size: rem(40px);

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .profile-picture {
      @include def-var(--c-profile-picture-size, $-profile-picture-size);
      @include clicktarget-button-circle;
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: end;
    }
  }
</style>
