<template>
  <v-form density="compact">
    <v-container class="pa-0">
      <v-row>
        <v-col cols="3">
          <v-hover #default="{ props, isHovering }">
            <div
              v-bind="props"
              class="upload position-relative d-flex rounded-lg justify-center align-center w-100 h-100"
            >
              <AnnotationIcon v-if="modelValue!.Icon2d" :annotation="modelValue!" size="64" />
              <v-icon v-else color="black" icon="image" size="64" style="opacity: 0.1" />
              <v-overlay
                :model-value="!!isHovering"
                class="align-center justify-center rounded-lg"
                contained
                @click="upload"
              >
                <div class="d-flex flex-column justify-center align-center">
                  <v-icon color="white" icon="upload" size="32" />
                  <span class="text-white">.png</span>
                </div>
              </v-overlay>
            </div>
          </v-hover>
        </v-col>
        <v-col>
          <sh-text-field
            v-model="title"
            hide-details
            :label="t('fields.title.label')"
            :placeholder="t('fields.title.placeholder')"
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <ColourPalette v-model="colour" />
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <sh-textarea
            no-resize
            v-model="description"
            counter="400"
            hide-details
            :label="t('fields.description.label')"
            :placeholder="t('fields.description.placeholder')"
            variant="outlined"
          />
        </v-col>
      </v-row>
    </v-container>
    <v-divider class="my-4" />
    <v-container class="pa-0">
      <v-row>
        <v-col>
          <div class="d-flex text-h5 align-center">
            <span>{{ t('texts.callToActionHelp') }}</span>
            <v-spacer />
            <v-btn color="minsk_900" variant="text" @click="addAction">
              <v-icon class="minsk-500 pr-2" icon="add" />
              <span>{{ t('labels.addAction') }}</span>
            </v-btn>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-table>
            <thead>
              <tr>
                <th>
                  <span>{{ t('fields.description.label') }}</span>
                </th>
                <th>
                  <span>{{ t('fields.url.label') }}</span>
                </th>
                <th style="width: 64px"></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="action in actions">
                <td class="new-style">
                  <v-text-field
                    data-testid="actiondata-description"
                    v-model="action.ActionData.Description"
                    density="compact"
                    :placeholder="t('fields.description.placeholder')"
                    flat
                    hide-details
                    variant="outlined"
                  />
                </td>
                <td class="new-style">
                  <v-text-field
                    variant="outlined"
                    data-testid="actiondata-Url"
                    v-model="action.ActionData.Url"
                    density="compact"
                    :placeholder="t('fields.url.placeholder')"
                    flat
                    hide-details
                  />
                </td>
                <td>
                  <v-tooltip location="bottom" open-delay="1000">
                    <template #activator>
                      <v-btn
                        class="shark-400"
                        data-testid="actiondata-remove"
                        density="comfortable"
                        icon="delete"
                        variant="text"
                        @click="removeAction(action)"
                      />
                    </template>
                    <span>{{ t('labels.removeAction') }}</span>
                  </v-tooltip>
                </td>
              </tr>
            </tbody>
          </v-table>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue';
import { fromColourData, toColourData } from '@/functions/colours';
import { Buffer } from 'buffer';
import { useI18n } from 'vue-i18n';
import { Action, DataOverlayAnnotation } from '@3cr/viewer-types-ts';

const { t } = useI18n();

const modelValue = defineModel<DataOverlayAnnotation>();

const title = computed({
  get(): string {
    return modelValue.value!.Title;
  },
  set(value: string): void {
    modelValue.value!.Title = value;
  }
});

const description = computed({
  get(): string {
    return modelValue.value!.Description;
  },
  set(value: string): void {
    modelValue.value!.Description = value;
  }
});

const icon = computed({
  get(): string {
    return modelValue.value!.Icon2d;
  },
  set(value: string): void {
    modelValue.value!.Icon2d = value;
  }
});

const colour = computed({
  get(): string {
    // We will use colour 2d as the source of truth
    return fromColourData(modelValue.value!.Colour2d);
  },
  set(value: string): void {
    const colourData = toColourData(value);
    modelValue.value!.Colour2d = colourData;
    modelValue.value!.Colour3d = colourData;
  }
});

const actions = computed({
  get(): Action[] {
    return modelValue.value!.CallToAction!.Actions;
  },
  set(value: Action[]) {
    modelValue.value!.CallToAction!.Actions = value;
  }
});

watch(
  modelValue,
  () => {
    if (modelValue.value!.CallToAction === null) {
      modelValue.value!.CallToAction = { Actions: [] };
    }
  },
  { immediate: true }
);

function addAction(): void {
  actions.value.push({ ActionType: 1, ActionData: { Description: '', Url: '' } });
}

function removeAction(item: Action): void {
  const index = actions.value.indexOf(item);
  if (index !== -1) {
    actions.value.splice(index, 1);
  }
}

function upload(): void {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/png';
  /* v8 ignore start */
  input.onchange = (_) => {
    const files = Array.from(input.files!!);
    if (files.length > 0) {
      const file = files[0];
      file.arrayBuffer().then((arr) => {
        icon.value = Buffer.from(arr).toString('base64');
      });
    }
  };
  /* v8 ignore stop */
  input.click();
}

defineExpose({ addAction, actions, icon, upload });
</script>

<style scoped lang="scss">
@use '@/assets/palette' as palette;

thead {
  font-weight: 600 !important;
  user-select: none;
  text-align: start;
  font-size: 12px !important;
  background-color: #f7f7f8;
  border-color: transparent;

  th {
    font-weight: 600 !important;
    line-height: 6px;
  }
}

.upload {
  border: 1px map-get(palette.$shark, 300) dashed;
}
</style>
