{#if status}
  <Status {index} {length} {timelineType} {timelineValue} {focusSelector}
          {status} {notification} {active} {shortcutScope} on:recalculateHeight
  />
{:else}
  <article class={className}
           tabindex="0"
           aria-posinset={index}
           aria-setsize={length}
           aria-label={ariaLabel}
           status-active={active}
  >
    <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
                  {account} {accountId} {uuid} isStatusInNotification="true" />
    {#if shortcutScope}
      <Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
      <Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
    {/if}
  </article>
{/if}
<style>
  .notification-article {
    width: 560px;
    max-width: calc(100vw - 40px);
    padding: 10px 20px;
    border-bottom: 1px solid var(--main-border);
  }
  .notification-article.status-active {
    background-color: var(--status-active-background);
  }
  @media (max-width: 767px) {
    .notification-article {
      padding: 10px 10px;
      max-width: calc(100vw - 20px);
      width: 580px;
    }
  }
</style>
<script>
  import Status from './Status.html'
  import StatusHeader from './StatusHeader.html'
  import Shortcut from '../shortcut/Shortcut.html'
  import { store } from '../../_store/store'
  import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
  import { goto } from '../../../../__sapper__/client'
  import { composeNewStatusMentioning } from '../../_actions/mention'
  import { classname } from '../../_utils/classname'

  export default {
    components: {
      Status,
      StatusHeader,
      Shortcut
    },
    data: () => ({
      active: false,
      shortcutScope: null
    }),
    store: () => store,
    computed: {
      account: ({ notification }) => notification.account,
      accountId: ({ account }) => account.id,
      notificationId: ({ notification }) => notification.id,
      status: ({ notification }) => notification.status,
      statusId: ({ status }) => status && status.id,
      uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => {
        return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
      },
      ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
        !status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
      ),
      className: ({ active, $underlineLinks }) => (classname(
        'notification-article',
        active && 'status-active',
        $underlineLinks && 'underline-links'
      ))
    },
    methods: {
      openAuthorProfile () {
        let { accountId } = this.get()
        goto(`/accounts/${accountId}`)
      },
      async mentionAuthor () {
        let { account } = this.get()
        await composeNewStatusMentioning(account)
      }
    }
  }
</script>