{#if !blurhash && type === 'unknown'}
  <button id={elementId}
            type="button"
            class="inline-media file-button focus-after"
            aria-label="attatched file"
            {tabindex}
            aria-hidden={ariaHidden}
            data-width={inlineWidth}
            data-height={inlineHeight}>
      <FileIcon />
  </button>
{:else}
  {#if !blurhash && (type === 'video' || type === 'audio')}
    <button id={elementId}
            type="button"
            class="inline-media play-video-button focus-after {type === 'audio' ? 'play-audio-button' : ''} {noNativeWidthHeight ? 'no-native-width-height' : ''}"
            aria-label={videoOrAudioButtonLabel}
            {tabindex}
            aria-hidden={ariaHidden}
            data-width={inlineWidth}
            data-height={inlineHeight}>
      <PlayVideoIcon />
      {#if type === 'video'}
        <LazyImage
          alt={description}
          title={description}
          src={previewUrl}
          fallback={oneTransparentPixel}
          {blurhash}
          width={inlineWidth}
          height={inlineHeight}
          background="var(--loading-bg)"
          {focus}
        />
      {/if}
    </button>
  {:else}
    <button id={elementId}
          type="button"
          class="inline-media show-image-button focus-after {(noNativeWidthHeight && !blurhash) ? 'no-native-width-height' : ''}"
          aria-label={imageButtonAriaLabel}
          title={description}
          on:mouseover="set({mouseover: event})"
          {tabindex}
          aria-hidden={ariaHidden}
          data-width={inlineWidth}
          data-height={inlineHeight}
  >
  {#if type === 'gifv' && $autoplayGifs && !blurhash}
    <AutoplayVideo
      ariaLabel={animatedLabel}
      poster={previewUrl}
      src={url}
      width={inlineWidth}
      height={inlineHeight}
      {focus}
    />
  {:elseif type === 'gifv'}
    <NonAutoplayGifv
      class={noNativeWidthHeight ? 'no-native-width-height' : ''}
      label={animatedLabel}
      poster={previewUrl}
      {blurhash}
      src={url}
      staticSrc={previewUrl}
      width={inlineWidth}
      height={inlineHeight}
      playing={mouseover}
      {focus}
    />
  {:else}
    <LazyImage
      alt={description}
      title={description}
      src={previewUrl}
      fallback={oneTransparentPixel}
      {blurhash}
      width={inlineWidth}
      height={inlineHeight}
      background="var(--loading-bg)"
      {focus}
    />
  {/if}
    </button>
  {/if}
{/if}
<style>
  :global(.status-media video, .status-media img) {
    object-fit: cover;
  }

  .play-video-button, .show-image-button, .file-button {
    margin: auto;
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
  }

  .file-button {
    background: var(--mask-bg);
  }

  .play-audio-button {
    background: var(--audio-bg);
  }

  .show-image-button {
    cursor: zoom-in;
  }

  .inline-media {
    position: relative;
    width: 100%;
    height: 100%;
  }

  :global(.no-native-width-height img, .no-native-width-height video){
    object-fit: contain;
  }
</style>
<script>
  import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media.js'
  import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog.js'
  import { mouseover } from '../../_utils/events.js'
  import NonAutoplayGifv from '../NonAutoplayGifv.html'
  import PlayVideoIcon from '../PlayVideoIcon.html'
  import FileIcon from '../FileIcon.html'
  import { store } from '../../_store/store.js'
  import LazyImage from '../LazyImage.html'
  import AutoplayVideo from '../AutoplayVideo.html'
  import { registerClickDelegate } from '../../_utils/delegate.js'
  import { convertCssPropertyToDataUrl } from '../../_utils/convertCssPropertyToDataUrl.js'
  import { formatIntl } from '../../_utils/formatIntl.js'

export default {
    async oncreate () {
      const { elementId } = this.get()
      registerClickDelegate(this, elementId, () => this.onClick())
    },
    computed: {
      focus: ({ meta }) => meta && meta.focus,
      // width/height to show inline
      inlineWidth: ({ smallWidth, originalWidth }) => {
        return smallWidth || originalWidth || DEFAULT_MEDIA_WIDTH
      },
      inlineHeight: ({ smallHeight, originalHeight }) => {
        return smallHeight || originalHeight || DEFAULT_MEDIA_HEIGHT
      },
      // width/height to show in a modal
      modalWidth: ({ originalWidth, smallWidth }) => originalWidth || smallWidth || 0,
      modalHeight: ({ originalHeight, smallHeight }) => originalHeight || smallHeight || 0,
      meta: ({ media }) => media.meta,
      small: ({ meta }) => meta && meta.small,
      original: ({ meta }) => meta && meta.original,
      smallWidth: ({ small }) => small && small.width,
      smallHeight: ({ small }) => small && small.height,
      originalWidth: ({ original }) => original && original.width,
      originalHeight: ({ original }) => original && original.height,
      noNativeWidthHeight: ({ originalWidth, originalHeight }) => typeof originalWidth !== 'number' || typeof originalHeight !== 'number',
      elementId: ({ media, uuid }) => `media-${uuid}-${media.id}`,
      description: ({ media }) => media.description || '',
      previewUrl: ({ media }) => media.preview_url,
      decodedBlurhash: ({ media }) => media.decodedBlurhash,
      blurhashToUse: ({ decodedBlurhash, $ignoreBlurhash }) => {
        if (!$ignoreBlurhash && decodedBlurhash) {
          return decodedBlurhash
        }
        return convertCssPropertyToDataUrl('--mask-bg')
      },
      blurhash: ({ blurhashToUse, showAsSensitive }) => showAsSensitive && blurhashToUse,
      url: ({ media }) => media.url,
      type: ({ media }) => media.type,
      tabindex: ({ showAsSensitive }) => showAsSensitive ? '-1' : '0',
      ariaHidden: ({ showAsSensitive }) => showAsSensitive,
      imageButtonAriaLabel: ({ type, description }) => (
        formatIntl('intl.showImage', { animated: type === 'gifv', description })
      ),
      videoOrAudioButtonLabel: ({ type, description }) => (
        formatIntl('intl.playVideoOrAudio', { audio: type === 'audio', description })
      ),
      animatedLabel: ({ description }) => (
        formatIntl('intl.animatedImage', { description })
      )
    },
    methods: {
      onClick () {
        (async () => {
          const { mediaAttachments, index } = this.get()
          console.log(mediaAttachments[index])
          const showMediaDialog = await importShowMediaDialog()
          showMediaDialog(mediaAttachments, index)
        })()
        return true
      }
    },
    data: () => ({
      oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
      mouseover: undefined
    }),
    store: () => store,
    events: {
      mouseover
    },
    components: {
      NonAutoplayGifv,
      PlayVideoIcon,
      FileIcon,
      LazyImage,
      AutoplayVideo
    }
  }
</script>