<template>
  <div class="tw-flex tw-gap-6">
    <FormGroup :label="t('showMeta.logo')" custom-control>
      <template #default="attrs">
        <ImagePicker v-model="logoId" v-bind="attrs" />
      </template>
    </FormGroup>

    <FormGroup :label="t('showMeta.image')" custom-control>
      <template #default="attrs">
        <ImagePicker v-model="imageId" v-bind="attrs" />
      </template>
    </FormGroup>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useI18n } from '@/i18n'
import { useSelectedShow } from '@/utilities'
import { useUpdatableState } from '@/util'
import ImagePicker from '@/components/images/ImagePicker.vue'
import FormGroup from '@/components/generic/FormGroup.vue'

const store = useStore()
const { t } = useI18n()
const selectedShow = useSelectedShow()
const logoId = useUpdatableState(
  computed(() => null),
  (imageId) => updateImage('logo', imageId),
)
const imageId = useUpdatableState(
  computed(() => selectedShow.value.image),
  (imageId) => updateImage('image', imageId),
)
async function updateImage(property: 'logo' | 'image', imageId: number | null) {
  await store.dispatch('shows/updateProperty', {
    id: selectedShow.value.id,
    property,
    value: imageId,
  })
}
</script>