<template>
  <a-modal
    v-model:visible="visible"
    :title="`${
      currentType === Type.bim ? $t('sys.create') : $t('sys.select')
    } ${$t('scene.name')}`"
    :width="`${currentType === Type.bim ? 480 : 660}px`"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <div class="footer">
        <p>
          <template v-if="currentType === Type.scene">
            {{
              $t('scene.selected', {
                len: Object.values(typeNums).reduce((t, c) => t + c.length, 0)
              })
            }}
          </template>
        </p>
        <div>
          <a-button
            class="action-bottom"
            size="middle"
            @click="visible = false"
          >
            {{ $t('sys.cancel') }}
          </a-button>
          <a-button
            class="action-bottom"
            type="primary"
            size="middle"
            @click="saveHandler"
          >
            {{ $t('sys.save') }}
          </a-button>
        </div>
      </div>
    </template>

    <a-form name="basic" label-align="left" autocomplete="off">
      <a-form-item v-if="showBim" :label="$t('scene.typeLabel')" required>
        <a-radio-group v-model:value="currentType" name="radioGroup">
          <a-radio :value="Type.scene">{{ typeDesc[Type.scene] }}</a-radio>
          <a-radio :value="Type.bim">{{ typeDesc[Type.bim] }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <UploadBim v-if="currentType === Type.bim" v-model:data="bim" />
    </a-form>
    <SelectScenes
      v-if="currentType === Type.scene"
      v-model:type-nums="typeNums"
      v-model:sceneList="sceneList"
      :scenes-count="scenesCount"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRaw, computed, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { SceneType } from '@/store'
import SelectScenes from './select-scenes.vue'
import UploadBim from './upload-bim.vue'

import type { UploadData } from './upload-bim.vue'
import type { Project, BimUploadData, SelectTypeScenes } from '@/store'
import { ui18n } from '@/lang'

export type SaveData =
  | {
      type: 'bim'
      payload: BimUploadData
    }
  | {
      type: 'scene'
      payload: SelectTypeScenes
    }

defineOptions({ name: 'InsertProjectScene' })

const props = defineProps<{
  showBim?: boolean
  project: Project
  onSave: (data: SaveData) => void
  onCancel: () => void
}>()
const sceneList = ref([...props.project.sceneList])

enum Type {
  scene = 'scene',
  bim = 'BIM'
}
const typeDesc = {
  [Type.scene]: ui18n.t('scene.name'),
  [Type.bim]: 'BIM'
}
const currentType = ref(Type.scene)

const bim = ref<UploadData>({ name: '', file: undefined })
const typeNums = ref(
  sceneList.value.reduce(
    (t, scene) => {
      t[scene.type].push(scene.num)
      return t
    },
    {
      [SceneType.SWKJ]: [],
      [SceneType.SWKK]: [],
      [SceneType.SWSS]: [],
      [SceneType.SWSG]: []
    } as SelectTypeScenes
  )
)

const scenesCount = computed(() =>
  sceneList.value.reduce((t, scene) => {
    t[scene.num] = scene.shootCount
    return t
  }, {} as { [key in string]: number })
)

const visible = ref(true)

const saveHandler = async () => {
  let data: SaveData
  if (currentType.value === Type.bim) {
    if (!bim.value.name) {
      return message.error(ui18n.t('scene.nameRule'))
    } else if (!bim.value.file) {
      return message.error(ui18n.t('scene.fileRule'))
    }
    data = { payload: toRaw(bim.value) as BimUploadData, type: 'bim' }
  } else {
    data = { payload: toRaw(typeNums.value), type: 'scene' }
  }

  await props.onSave(data)
  visible.value = false
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    margin-bottom: 0;
    color: #646566;
    font-size: 14px;
  }
}
</style>
