<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
  <p>{{status.spoiler_text}}</p>
</div>
<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
  <button type="button" delegate-key="{{delegateKey}}">
    {{spoilerShown ? 'Show less' : 'Show more'}}
  </button>
</div>
<style>
  .status-spoiler {
    grid-area: spoiler;
    word-wrap: break-word;
    overflow: hidden;
    white-space: pre-wrap;
    font-size: 0.9em;
    margin: 10px 5px;
  }

  .status-spoiler.status-in-own-thread {
    font-size: 1.3em;
    margin: 20px 5px 10px;
  }

  .status-spoiler.status-in-notification {
    color: var(--very-deemphasized-text-color);
  }

  .status-spoiler-button {
    grid-area: spoiler-btn;
    margin: 10px 5px;
  }

  .status-spoiler-button.status-in-own-thread {
  }

  .status-spoiler-button button {
    padding: 5px 10px;
    font-size: 1.1em;
  }
</style>
<script>
  import { store } from '../../_store/store'
  import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'

  export default {
    oncreate() {
      registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
    },
    ondestroy() {
      unregisterClickDelegate(this.get('delegateKey'))
    },
    store: () => store,
    computed: {
      spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
      statusId: (status) => status.id,
      delegateKey: (statusId, timelineType, timelineValue) => `spoiler-${timelineType}-${timelineValue}-${statusId}`
    },
    methods: {
      onClickSpoilerButton() {
        let contextualStatusId = this.get('contextualStatusId')
        let $spoilersShown = this.store.get('spoilersShown')
        $spoilersShown[contextualStatusId] = !$spoilersShown[contextualStatusId]
        this.store.set({'spoilersShown': $spoilersShown})
        this.fire('recalculateHeight')
      }
    }
  }
</script>