<script setup lang="ts">
import FilePermissionDialog from '@/components/FilePermissionDialog.vue'
import { useFilesPageContext } from '@/composables/files/filesPageContext'

const p = useFilesPageContext()
</script>

<template>
  <v-dialog v-model="p.showUpload" max-width="500">
    <v-card border>
      <v-card-title>上传文件</v-card-title>
      <v-card-text>
        <v-file-input v-model="p.uploadFiles" label="选择文件" variant="outlined" multiple show-size />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showUpload = false">取消</v-btn>
        <v-btn color="primary" variant="flat" :loading="p.uploading" @click="p.doUpload">上传</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="p.showNewFile" max-width="400">
    <v-card border>
      <v-card-title>新建文件</v-card-title>
      <v-card-text>
        <v-text-field
          v-model="p.newFileName"
          label="文件名"
          variant="outlined"
          density="compact"
          :rules="[p.validatePathSegment]"
          placeholder="example.conf"
          autofocus
          @keydown.enter="p.doNewFile"
        />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showNewFile = false">取消</v-btn>
        <v-btn color="primary" variant="flat" :loading="p.actionLoading" @click="p.doNewFile">创建</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="p.showMkdir" max-width="400">
    <v-card border>
      <v-card-title>新建目录</v-card-title>
      <v-card-text>
        <v-text-field
          v-model="p.mkdirName"
          label="目录名"
          variant="outlined"
          density="compact"
          :rules="[p.validatePathSegment]"
          @keydown.enter="p.doMkdir"
        />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showMkdir = false">取消</v-btn>
        <v-btn color="primary" variant="flat" @click="p.doMkdir">创建</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="p.showFileDelete" max-width="400">
    <v-card border>
      <v-card-title>确认删除</v-card-title>
      <v-card-text>
        确定要删除 <strong>{{ p.deletingFile?.name }}</strong> 吗？
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showFileDelete = false">取消</v-btn>
        <v-btn color="error" variant="flat" @click="p.doDeleteFile">删除</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="p.showRename" max-width="400">
    <v-card border>
      <v-card-title>重命名</v-card-title>
      <v-card-text>
        <v-text-field
          v-model="p.newName"
          label="新名称"
          variant="outlined"
          density="compact"
          :rules="[p.required('名称')]"
          autofocus
          @keydown.enter="p.doRename"
        />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showRename = false">取消</v-btn>
        <v-btn color="primary" variant="flat" @click="p.doRename">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <FilePermissionDialog
    v-model="p.showChmod"
    :file="p.chmodFile"
    :server-id="p.selectedServer"
    :loading="p.chmodLoading"
    @apply="p.doChmod"
  />

  <v-dialog v-model="p.showCompress" max-width="440">
    <v-card border>
      <v-card-title>压缩</v-card-title>
      <v-card-text>
        <p class="text-body-2 mb-3">将压缩 {{ p.compressPaths.length }} 项到当前目录</p>
        <v-text-field v-model="p.compressDest" label="压缩包路径" variant="outlined" density="compact" />
        <v-select
          v-model="p.compressFormat"
          :items="[
            { title: 'tar.gz', value: 'tar.gz' },
            { title: 'zip', value: 'zip' },
          ]"
          item-title="title"
          item-value="value"
          label="格式"
          variant="outlined"
          density="compact"
        />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showCompress = false">取消</v-btn>
        <v-btn color="primary" variant="flat" :loading="p.actionLoading" @click="p.doCompress">压缩</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="p.showDecompress" max-width="440">
    <v-card border>
      <v-card-title>解压</v-card-title>
      <v-card-text>
        <p class="text-body-2 mb-2 text-truncate">{{ p.decompressSource }}</p>
        <v-text-field v-model="p.decompressDest" label="解压到目录" variant="outlined" density="compact" />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showDecompress = false">取消</v-btn>
        <v-btn color="primary" variant="flat" :loading="p.actionLoading" @click="p.doDecompress">解压</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="p.showPreview" max-width="900" scrollable>
    <v-card border>
      <v-card-title class="d-flex align-center">
        <span class="text-truncate">{{ p.previewTitle }}</span>
        <v-spacer />
        <v-btn icon="mdi-close" variant="text" @click="p.showPreview = false" />
      </v-card-title>
      <v-divider />
      <v-card-text style="max-height: 70vh">
        <v-progress-linear v-if="p.previewLoading" indeterminate class="mb-2" />
        <pre v-else class="files-preview-body text-body-2">{{ p.previewContent }}</pre>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="p.showPreview = false">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>
.files-preview-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
}
</style>
