<script setup lang="ts">
import { Key24Regular } from '@vicons/fluent'
import { LockOutlined } from '@vicons/material'
import MessagePaper from './MessagePaper.vue';
import { Icon } from '@vicons/utils'
import { NButton, NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
import type { PropType } from 'vue'

import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'

const props = defineProps({
  newPlaceCode: {
    type: String,
  },
  newPlaceName: {
    type: String,
  },
  newPlaceText: {
    type: String,
  },
  place: {
    type: Object as PropType<Place>,
  },
  mode: {
    type: String,
    required: true,
  },
  addAction: {
    type: Function as PropType<(param: string) => void>,
  }
})

const emit = defineEmits<{
  'update:newPlaceCode': [value: string],
  'update:newPlaceName': [value: string],
  'update:newPlaceText': [value: string],
  'update:mode': [value: string]
}>()
const updateCode = (code: string) => {
  emit('update:newPlaceCode', code)
}
const updateName = (name: string) => {
  emit('update:newPlaceName', name)
}
const updateText = (text: string) => {
  emit('update:newPlaceText', text)
}
const updateMode = (mode: string) => {
  emit('update:mode', mode)
}

function onCreateApplication(): Application {
  return {
    name: undefined,
    image: undefined,
  }
}

function onCreateDoor(): Door {
  return {
    code: undefined,
    name: undefined,
    keys: undefined,
  }
}

function onCreateKey(): Key {
  return {
    name: undefined,
  }
}
</script>

<template>
  <div v-if="mode == 'mini-add'" class="place-block-hover show-editor-block" @click="updateMode('add')">
    <p class="place-image-plus">+</p>
  </div>

  <div v-if="mode == 'add'" class="place-block">
    <n-space vertical>
      <n-input-group>
        <n-input :style="{ width: '20%' }" :value="newPlaceCode" @update:value="updateCode" type="text"
          placeholder="Ы-1" />
        <n-input :style="{ width: '80%' }" :value="newPlaceName" @update:value="updateName" type="text"
          placeholder="Дом №Ы" />
      </n-input-group>
      <n-input :value="newPlaceText" @update:value="updateText" type="textarea" :autosize="{ minRows: 3 }"
        placeholder="В начале было слово..." />
      <slot></slot>
    </n-space>
  </div>

  <div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
    <div class="message-header">
      {{ props.place?.code }}: {{ props.place?.name }}
    </div>
    <hr class="hr" />
    <div class="message-content">
      <div v-if="props.place?.image">
        <div class="message-image-border">
          <img :src="props.place?.image" class="message-image">
        </div>
      </div>
      {{ props.place?.text }}
    </div>

    <div v-for="door in props.place?.doors" v-bind:key="door.code" class="door-block">
      {{ door.name }} <span v-for="key in door.keys" class="key-block">
        <Icon class="lock-icon">
          <LockOutlined />
        </Icon> {{ key.name }}
      </span>
    </div>

    <hr class="hr" v-if="props.place?.applications?.length" />
    <div class="message-footer application-block" v-for="application in props.place?.applications"
      v-bind:key="application.name">
      Приложение: {{ application.name }}
    </div>

    <p class="gray-block">
      <span v-if="props.place?.hidden">
        Скрытая точка
      </span>
      <span v-for="key in props.place?.keys" class="key-block">
        <Icon class="lock-icon">
          <Key24Regular />
        </Icon> {{ key.name }}
      </span>
    </p>
  </div>

  <div v-if="mode == 'show'">
    <MessagePaper>
      <div class="message-show-header font">
        {{ place?.code }}: {{ place?.name }}
        <span class="collapse-icon collapse-icon-up" @click="updateMode('show-collapse')"></span>
      </div>
      <hr class="show-hr" />
      <div class="message-show-content font">
        <div v-if="place?.image?.length">
          <div class="message-image-border">
            <img v-bind:src="place?.image" class="message-image" />
          </div>
        </div>
        {{ place?.text }}
      </div>
      <hr class="show-hr" v-if="props.place?.doors?.length" />
      <div v-for="door in props.place?.doors" :key="door.code" class="button-dialog font"
        v-on:click="addAction!(door.code!)">
        <div class="button-dialog-text">
          {{ door.code }} {{ door.name }}
        </div>
      </div>
      <hr class="show-hr" v-if="props.place?.applications?.length" />
      <div class="message-show-footer font" v-for="application in props.place?.applications" :key="application.name">
        Приложение: {{ application.name }}
        <!-- <div class="application-label">{{ application.number }}</div> -->
      </div>
    </MessagePaper>
  </div>

  <div v-if="mode == 'show-collapse'">
    <MessagePaper>
      <div class="message-header font">
        {{ place?.code }}: {{ place?.name }}
        <span class="collapse-icon" @click="updateMode('show')"></span>
      </div>
    </MessagePaper>
  </div>

  <div v-if="mode == 'edit'" class="place-block">
    <n-space vertical>
      <n-input-group>
        <n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder="Ы-1" />
        <n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder="Дом №Ы" />
      </n-input-group>
      <n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
        placeholder="В начале было слово..." />

      <p class="settings-header">Картинка</p>
      <div>
        <n-space>
          <n-space vertical>
            <img :src="props.place.image" class="message-edit-image">
            <n-button @click="props.place.image = '', props.place.fileList = null">Убрать картинку</n-button>
          </n-space>
          <n-space vertical>
            <n-input v-model:value="props.place.image" type="text" placeholder="Не задано" disabled />
            <n-upload directory-dnd :max="1" v-model:file-list="props.place.fileList">
              <n-upload-dragger>
                <n-text style="font-size: 16px">
                  Щелкните или перетащите файл в эту область для загрузки
                </n-text>
              </n-upload-dragger>
            </n-upload>
          </n-space>
        </n-space>
      </div>

      <p class="settings-header">Видимость точки</p>
      <n-switch v-model:value="props.place.hidden">
        <template #checked>
          Скрытая точка
        </template>
        <template #unchecked>
          Обычная точка
        </template>
      </n-switch>

      Улики
      <n-dynamic-input v-model:value="props.place.applications" :on-create="onCreateApplication">
        <template #create-button-default> Добавить улику </template>
        <template #default="{ value }">
          <div style="display: flex; align-items: center; width: 100%">
            <n-input v-model:value="value.name" type="text" placeholder="Название" />
          </div>
        </template>
      </n-dynamic-input>

      Действия
      <n-dynamic-input v-model:value="props.place.doors" :on-create="onCreateDoor">
        <template #create-button-default> Добавить действие </template>
        <template #action="{ index, create, remove }">
          <div style="display: flex; flex-direction: column;">
            <n-button @click="() => create(index)" class="plus-minus-buttons">+</n-button>
            <n-button disabled @click="() => remove(index)" class="plus-minus-buttons">-</n-button>
          </div>
        </template>
        <template #default="{ value: door }">
          <div style="display: flex; flex-direction: column; width: 100%">

            <div class="door-add-block">
              <n-input-group>
                <n-input :style="{ width: '30%' }" v-model:value="door.code" type="text" placeholder="Код" />
                <n-input :style="{ width: '70%' }" v-model:value="door.name" type="text" placeholder="Название" />
              </n-input-group>

              <p class="need-keys-text">Требуемые ключи</p>
              <div class="door-field">
                <n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
                  <template #create-button-default> Добавить ключ </template>
                  <template #default="{ value: key }">
                    <div style="display: flex; align-items: center; width: 100%">
                      <n-input v-model:value="key.name" type="text" placeholder="Название" />
                    </div>
                  </template>
                </n-dynamic-input>
              </div>
            </div>

          </div>
        </template>
      </n-dynamic-input>

      Получаемые ключи
      <n-dynamic-input v-model:value="props.place.keys" :on-create="onCreateKey">
        <template #create-button-default> Добавить ключ </template>
        <template #default="{ value: key }">
          <div style="display: flex; align-items: center; width: 100%">
            <n-input v-model:value="key.name" type="text" placeholder="Название" />
          </div>
        </template>
      </n-dynamic-input>

      <div class="slot-block">
        <slot></slot>
      </div>
    </n-space>
  </div>
</template>

<style scoped>
.hr {
  margin: 10px 0;
  border: dashed 1px;

  /* border-color: black; */
  border-color: #eee;
}

.place-block-hover,
.place-block {
  margin: 10px 0;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #444;
}

.place-block-hover:hover {
  color: #63e2b7;
  cursor: pointer;
  border: 1px solid #63e2b7;
}

.place-image-plus {
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.show-editor-block {
  cursor: pointer;
}

.message-content {
  font-weight: 500;
  white-space: pre-wrap;
}

.gray-block {
  margin-top: 5px;
  color: #777;
}

.application-block {
  margin-right: 5px;
  color: burlywood;
}

.door-block {
  display: inline-block;
  margin: 10px 5px 10px 0;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #222;
  color: #eee;
}

.door-add-block {
  padding: 10px;
  border-radius: 5px;
  background-color: #222;
  color: #eee;
}

.key-block {
  color: gold;
  margin-left: 10px;
}

.lock-icon {
  position: relative;
  top: 2px;
}

.door-field {
  margin-top: 10px;
}

.need-keys-text {
  color: gold;
  margin: 15px 0 0;
  padding: 0;
}

.slot-block {
  margin-top: 10px;
}

.plus-minus-buttons {
  border: 1px solid #444;
  padding: 0 13px;
  margin: 0 0 10px 5px;
  text-align: center;
  color: #eee;
  font-size: 25px;
  border-radius: 40px;
}

.plus-minus-buttons:hover {
  cursor: pointer;
  color: #63e2b7;
}

.message-image-border {
  width: 40%;
  max-width: 200px;
  float: left;
  padding: 7px;
  margin-right: 15px;
  background-image: url("@/assets/images/paper_white.jpg");
  background-size: cover;
  box-shadow: 0 3px 15px rgb(98 98 98);
  transform: rotate(-3deg);
}

.message-image {
  width: 100%;
}

.message-edit-image {
  width: 135px;
  height: 135px;
}

.message-header {
  font-size: 20px;
  padding-right: 50px;
}

.message-footer {
  padding-right: 50px;
  font-weight: 400;
  color: burlywood;
  position: relative;
}

.message-show-header {
  font-size: 20px;
  padding-right: 50px;
}

.collapse-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 45px;
  height: 28px;
  cursor: pointer;
  background-image: url("@/assets/images/collapse.png");
  background-size: cover;
  background-position: center;
}

.collapse-icon-up {
  transform: rotate(-180deg);
}

.show-hr {
  margin: 10px 0;
  border: dashed 1px;
  border-color: black;
}

.font {
  font-family: 'font_old_typer';
  font-size: 18px;
}

.message-show-content {
  font-weight: 500;
  white-space: pre-wrap;
}

.message-show-footer {
  padding-right: 50px;
  font-weight: 400;
  color: var(--second-color);
  position: relative;
}

.button-dialog {
  display: inline-block;
  font-weight: 600;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 10px;
  background-image: url("@/assets/images/belt.png");
  background-size: cover;
  color: #bfa07d;
  cursor: pointer;
}

.button-dialog-text {
  padding: 5px 12px;
}
</style>
