<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
// Copyright © 2021 Hardcore Engineering Inc.
// 
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
  import activity from '@anticrm/activity'
  import calendar from '@anticrm/calendar'
  import type { Doc } from '@anticrm/core'
  import notification from '@anticrm/notification'
  import type { Asset } from '@anticrm/platform'
  import { AnyComponent, AnySvelteComponent, Component, Panel, Icon } from '@anticrm/ui'

  export let title: string | undefined = undefined
  export let subtitle: string | undefined = undefined
  export let icon: Asset | AnySvelteComponent | undefined = undefined
  export let rightSection: AnyComponent | undefined = undefined
  export let object: Doc
  export let panelWidth: number = 0
  export let innerWidth: number = 0
  export let isHeader: boolean = true
  export let isSub: boolean = true
  export let isAside: boolean = true
  export let minimize: boolean = false

  let docWidth: number = 0
  $: minimize = docWidth < 1280 && docWidth >= 1024
  $: needHeader = $$slots.header || minimize || isHeader
</script>

<svelte:window bind:innerWidth={docWidth} />
<Panel
  rightSection={rightSection !== undefined}
  bind:isAside
  isHeader={needHeader}
  bind:panelWidth
  bind:innerWidth
  on:close
>
  <svelte:fragment slot="title">
    <div class="popupPanel-title__content-container antiTitle">
      {#if $$slots.navigator}
        <div class="buttons-group xsmall-gap mr-4">
          <slot name="navigator" />
        </div>
      {/if}
      {#if $$slots.title}
        <slot name="title" />
      {:else}
        <div class="icon-wrapper">
          {#if icon}<div class="wrapped-icon"><Icon {icon} size={'medium'} /></div>{/if}
          <div class="title-wrapper">
            {#if title}<span class="wrapped-title">{title}</span>{/if}
            {#if subtitle}<span class="wrapped-subtitle">{subtitle}</span>{/if}
          </div>
        </div>
      {/if}
    </div>
  </svelte:fragment>

  <svelte:fragment slot="utils">
    <Component is={calendar.component.DocReminder} props={{ value: object, title }} />
    <Component is={notification.component.LastViewEditor} props={{ value: object }} />
    {#if $$slots.utils}
      <div class="buttons-divider" />
      <slot name="utils" />
    {/if}
  </svelte:fragment>

  <svelte:fragment slot="header">
    {#if $$slots.header || ($$slots.actions && minimize)}
      <div class="header-row between">
        {#if $$slots.header}<slot name="header" />{/if}
        <div class="buttons-group xsmall-gap ml-4">
          <slot name="tools" />
          {#if $$slots.actions && minimize}
            <div class="buttons-divider" />
            <slot name="actions" />
          {/if}
        </div>
      </div>
    {/if}
    {#if $$slots['custom-attributes']}
      {#if isSub}<div class="header-row"><slot name="custom-attributes" direction="row" /></div>{/if}
    {:else if $$slots.attributes && minimize}<div class="header-row">
        <slot name="attributes" direction="row" />
      </div>{/if}
  </svelte:fragment>

  <svelte:fragment slot="aside">
    <div style="padding: .75rem 1.5rem">
      {#if $$slots.actions}
        <div class="flex-row-center pb-3 bottom-divider">
          <span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
          <div class="buttons-group xsmall-gap">
            <slot name="actions" />
          </div>
        </div>
      {/if}
      {#if $$slots['custom-attributes']}
        <slot name="custom-attributes" direction="column" />
      {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
      {#if $$slots.aside}<slot name="aside" />{/if}
    </div>
  </svelte:fragment>

  {#if rightSection !== undefined}
    <slot />
  {:else}
    <Component is={activity.component.Activity} props={{ object, integrate: true }}>
      <slot />
    </Component>
  {/if}
</Panel>
