<script setup lang="ts">
import { inject, onMounted, shallowRef } from 'vue';

import { t } from '@/i18n';
import { ProtocolConfigMethod } from '@/constants';
import { IS_USED_IN_MODAL_GUIDANCE } from '@/constants/inject-key';

import CreateProtocol from './CreateProtocol.vue';
import FinishProtocol from './FinishProtocol.vue';
import RecognitionResult from './RecognitionResult.vue';
import SelectDeviceType from './SelectDeviceType.vue';
import UploadProtocolFile from './UploadProtocolFile.vue';
import WaitingRecognition from './WaitingRecognition.vue';

import type { SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';

const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();

const currentStep = props.steps[props.stepIndex];
const isUsedInModalGuidance = inject(IS_USED_IN_MODAL_GUIDANCE, false);

onMounted(() => {
  currentStep.title = t('setupProtocol.selectConfigMethod');
  props.steps.length = props.stepIndex + 1; // 回退到该步骤时，移除其后续步骤
});

const finish = () => {
  const isImportFromTemplate = props.form.configMethod === ProtocolConfigMethod.ImportFromTemplate;
  currentStep.title = isImportFromTemplate ? t('setupProtocol.importFromTemplate') : t('setupProtocol.manuallyCreate');

  if (isImportFromTemplate) {
    props.steps.push(
      {
        title: t('setupProtocol.uploadFile'),
        component: shallowRef(UploadProtocolFile),
      },
      {
        title: t('setupProtocol.waitingForRecognition'),
        stepTitle: t('setupProtocol.recognizing'),
        component: shallowRef(WaitingRecognition),
        nextStepButtonHide: true,
      },
      {
        title: t('setupProtocol.confirmResult'),
        stepTitle: t('setupProtocol.recognitionResult'),
        component: shallowRef(RecognitionResult),
        formLayout: 'vertical',
        // exportButtonShow: true,
        nextStepButtonText: t('common.finishSetup'),
      },
      {
        title: t('common.finishSetup'),
        hideHeader: true,
        component: shallowRef(FinishProtocol),
        prevStepButtonHide: true,
        nextStepButtonText: isUsedInModalGuidance ? t('common.finishSetup') : undefined,
        isLastStep: true,
      },
    );
  } else {
    props.steps.push(
      {
        title: t('setupProtocol.selectDeviceType'),
        stepDescription: t('setupProtocol.selectDeviceTypeTip'),
        component: shallowRef(SelectDeviceType),
      },
      {
        title: t('setupProtocol.createProtocol'),
        component: shallowRef(CreateProtocol),
        formLayout: 'vertical',
        // exportButtonShow: true,
        nextStepButtonText: t('common.finishSetup'),
      },
      {
        title: t('common.finishSetup'),
        hideHeader: true,
        component: shallowRef(FinishProtocol),
        prevStepButtonHide: true,
        nextStepButtonText: isUsedInModalGuidance ? t('common.finishSetup') : undefined,
        isLastStep: true,
      },
    );
  }
};

defineExpose<UseGuideStepItemExpose>({
  finish,
});
</script>

<template>
  <div>
    <AFormItem :label="$t('setupProtocol.configMethod')" name="configMethod">
      <ARadioGroup class="config-radio-group" v-model:value="form.configMethod">
        <ARadio :value="ProtocolConfigMethod.ImportFromTemplate">{{ $t('setupProtocol.importFromTemplate') }}</ARadio>
        <ARadio :value="ProtocolConfigMethod.ManuallyCreate">{{ $t('setupProtocol.manuallyCreate') }}</ARadio>
      </ARadioGroup>
    </AFormItem>
  </div>
</template>

<style lang="scss" scoped>
.config-radio-group {
  label {
    margin-right: 110px;
  }
}
</style>
