<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { CheckOne } from '@icon-park/vue-next'
import JsonViewer from 'vue-json-viewer'
import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
import { useLayoutConfig } from '@/composables/useLayoutConfig'

interface Props {
  displayFormat: PluginDisplayFormatType
  name: string
  arguments: string
  content: string
  pluginLoading: boolean
}

const props = defineProps<Props>()

const { isMobile } = useLayoutConfig()

const { t } = useI18n()

const isFolding = ref(true)

const parsedPluginArguments = computed(() => {
  try {
    if (props.arguments) {
      return JSON.parse(props.arguments)
    }
    return {}
  } catch (error) {
    return { error: 'Invalid JSON' }
  }
})

const parsedPluginContent = computed(() => {
  try {
    if (props.content) {
      return JSON.parse(props.content)
    }
    return {}
  } catch (error) {
    return { error: 'Invalid JSON' }
  }
})

const parsedMarkdownPluginContent = computed(() => {
  try {
    if (props.content) {
      return JSON.parse(props.content)
    }
    return ''
  } catch (error) {
    return props.content
  }
})
</script>

<template>
  <div
    class="flex w-full flex-col bg-[#f3f5f9]"
    :class="isMobile ? 'rounded-[2.66667vw] py-[2.66667vw] text-[3.2vw]' : 'rounded-[10px] py-[10px]'"
  >
    <div
      class="flex flex-1 items-center justify-between gap-[10px] overflow-hidden"
      :class="isMobile ? 'px-[3.2vw]' : 'px-[12px]'"
    >
      <div class="flex flex-1 items-center gap-[6px] overflow-hidden">
        <div
          v-show="pluginLoading"
          class="bg-px-plugin_loading-gif bg-contain bg-center bg-no-repeat"
          :class="isMobile ? 'h-[3.73333vw] w-[3.73333vw]' : 'h-[14px] w-[14px]'"
        />
        <CheckOne v-show="!pluginLoading" theme="outline" size="16" fill="#40bd23" />

        <n-ellipsis class="text-gray-font-color w-full leading-5" :line-clamp="1" :tooltip="{ with: 'trigger' }">
          {{
            pluginLoading
              ? t('common_module.plugin_in_progress', { pluginName: name })
              : t('common_module.plugin_executed_successfully', {
                  pluginName: name,
                })
          }}
        </n-ellipsis>
      </div>

      <span
        v-show="!pluginLoading"
        class="iconfont icon-left text-font-color transform cursor-pointer text-[12px] duration-200 ease-in-out hover:text-[#777ef9]"
        :class="isFolding ? 'rotate-[270deg]' : 'rotate-[90deg]'"
        @click="isFolding = !isFolding"
      />
    </div>

    <n-scrollbar style="max-height: 500px" :class="{ 'mt-[10px]': !isFolding }">
      <div
        class="flex transform flex-col overflow-x-auto duration-200 ease-in-out"
        :class="[isFolding ? 'h-0 overflow-hidden' : 'h-fit', isMobile ? 'px-[3.2vw]' : 'px-[12px]']"
      >
        <!-- json格式 -->
        <div v-if="displayFormat === 'json'">
          <div>
            <span
              class="rounded-theme inline-block bg-[#E8EAFF] text-[#0072FF]"
              :class="
                isMobile
                  ? 'h-[7.2vw] px-[3.2vw] text-[2.93333vw] leading-[7.2vw]'
                  : 'h-[29px] px-[12px] text-[12px] leading-[29px]'
              "
            >
              {{ t('common_module.input_parameter') }}
            </span>
            <JsonViewer :value="parsedPluginArguments" :expand-depth="3" />
          </div>

          <div class="mt-[10px]">
            <span
              class="rounded-theme inline-block bg-[#E8EAFF] text-[#0072FF]"
              :class="
                isMobile
                  ? 'h-[7.2vw] px-[3.2vw] text-[2.93333vw] leading-[7.2vw]'
                  : 'h-[29px] px-[12px] text-[12px] leading-[29px]'
              "
            >
              {{ t('common_module.output_parameter') }}
            </span>
            <JsonViewer :value="parsedPluginContent" :expand-depth="3" />
          </div>
        </div>

        <!-- markdown格式 -->
        <div v-else-if="displayFormat === 'markdown'">
          <div>
            <MarkdownRender :raw-text-content="parsedMarkdownPluginContent" :font-size="isMobile ? '3.2vw' : '14px'" />
          </div>
        </div>

        <!-- none格式 -->
        <div v-else-if="displayFormat === 'none'">
          <span class="text-font-color break-all">{{ content }}</span>
        </div>
      </div>
    </n-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.markdown-render-container .markdown-render-inner) {
  table {
    color: #fff !important;
  }
}

:deep(.jv-container.jv-light) {
  font-family: 'Microsoft YaHei UI';
  font-size: 14px;

  .jv-code.open {
    padding-bottom: 0;
  }

  .jv-code {
    padding: 10px 0 0;
    background-color: #f3f5f9;
  }

  .jv-item.jv-string {
    color: #999;
  }

  .jv-item.jv-number {
    color: #0072ff;
  }

  .jv-key {
    color: #000;
  }
}
</style>
