<ModalDialog :label :shown :closed :title background="var(--main-bg)">
  <GenericDialogList :items on:click="onClick(event)" />
</ModalDialog>
<script>
  import ModalDialog from './ModalDialog.html'
  import { store } from '../../_store/store'
  import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
  import { setPostPrivacy } from '../../_actions/postPrivacy'
  import GenericDialogList from './GenericDialogList.html'

  export default {
    components: {
      ModalDialog,
      GenericDialogList
    },
    store: () => store,
    data: () => ({
      postPrivacyOptions: POST_PRIVACY_OPTIONS
    }),
    methods: {
      async show() {
        this.set({shown: true})
      },
      onClick(item) {
        setPostPrivacy(this.get('realm'), item.key)
        this.set({closed: true})
      }
    },
    computed: {
      composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
      postPrivacy: (postPrivacyKey) => {
        return POST_PRIVACY_OPTIONS.find(_ => _.key === postPrivacyKey)
      },
      postPrivacyKey: (composeData, $currentVerifyCredentials) => {
        return composeData.postPrivacy || $currentVerifyCredentials.source.privacy
      },
      items: (postPrivacy, postPrivacyOptions) => {
        return postPrivacyOptions.map(option => ({
          key: option.key,
          label: option.label,
          icon: option.icon,
          selected: postPrivacy.key === option.key
        }))
      }
    }
  }
</script>