<template>
  <div
    class="ivyforms-file-upload__entry ivyforms-gap-column-24 ivyforms-gap-row-8"
    :class="[
      embedded ? 'ivyforms-align-items-center' : 'ivyforms-align-items-start',
      ...(embedded ? [] : ['ivyforms-py-20', 'ivyforms-px-24']),
      { 'ivyforms-file-upload__entry--embedded': embedded },
      entryLayoutClass,
    ]"
  >
    <div v-if="showLabel" class="ivyforms-file-upload__entry-label ivyforms-pt-2">
      {{ fieldLabel }}
    </div>
    <div
      class="ivyforms-file-upload__entry-files ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-8"
    >
      <div
        v-for="(file, idx) in files"
        :key="idx"
        class="ivyforms-file-upload__entry-file-line ivyforms-flex ivyforms-align-items-center ivyforms-gap-8"
      >
        <span
          class="ivyforms-file-upload__entry-glyph-wrap ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center ivyforms-flex-shrink-0"
        >
          <IvyFileUploadFileGlyph :file-name="file.name" size="m" />
        </span>
        <span class="ivyforms-file-upload__entry-fname">
          <IvyLink
            v-if="file.url"
            :href="file.url"
            target="_blank"
            rel="noreferrer"
            size="s"
            class="ivyforms-file-upload__entry-link ivyforms-inline-flex"
          >
            {{ file.name }}
          </IvyLink>
          <template v-else>{{ file.name }}</template>
        </span>
      </div>
    </div>
    <div
      v-if="showActions"
      class="ivyforms-file-upload__entry-actions ivyforms-flex ivyforms-align-items-start ivyforms-justify-content-end"
    >
      <button
        type="button"
        class="ivyforms-file-upload__entry-more ivyforms-py-2 ivyforms-px-6"
        :aria-label="moreLabel"
      >
        <span aria-hidden="true">⋯</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import IvyLink from '@/views/_components/link/IvyLink.vue'
import IvyFileUploadFileGlyph from '@/views/_components/file-upload/IvyFileUploadFileGlyph.vue'

export interface FileUploadEntryFile {
  name: string
  url?: string
}

const props = withDefaults(
  defineProps<{
    fieldLabel?: string
    files: FileUploadEntryFile[]
    /** Used when showActions is true */
    moreLabel?: string
    showLabel?: boolean
    showActions?: boolean
    /** Table cell: drop outer padding/divider/bg */
    embedded?: boolean
  }>(),
  {
    fieldLabel: '',
    moreLabel: '',
    showLabel: true,
    showActions: false,
    embedded: false,
  },
)

const entryLayoutClass = computed(() => {
  if (props.showLabel && props.showActions) {
    return 'ivyforms-file-upload__entry--layout-full'
  }
  if (props.showLabel) {
    return 'ivyforms-file-upload__entry--layout-label'
  }
  if (props.showActions) {
    return 'ivyforms-file-upload__entry--layout-actions'
  }
  return 'ivyforms-file-upload__entry--layout-files'
})
</script>

<style scoped lang="scss">
.ivyforms-file-upload {
  &__entry {
    display: grid;
    border-bottom: 1px solid var(--map-base-dusk-stroke--2);
    background: var(--map-ground-level-2-foreground, var(--map-ground-level-1-background, #fafafa));

    &--layout-files {
      grid-template-columns: 1fr;
    }

    &--layout-label {
      grid-template-columns: minmax(120px, 200px) 1fr;
    }

    &--layout-actions {
      grid-template-columns: 1fr auto;
    }

    &--layout-full {
      grid-template-columns: minmax(120px, 200px) 1fr auto;
    }

    &--embedded {
      padding: 0;
      border: none;
      background: transparent;

      ::v-deep(.ivyforms-link) {
        text-align: left;
        display: block;
      }
    }

    &-label {
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      color: var(--map-base-dusk-symbol-2, #111827);
    }

    &-files {
      min-width: 0;
    }

    &-glyph-wrap {
      flex-shrink: 0;
      line-height: 0;
      color: var(--map-base-dusk-symbol-2, #374151);
    }

    &-fname {
      font-size: 14px;
      line-height: 22px;
      font-weight: 400;
      color: var(--map-base-dusk-symbol-2, #374151);
      overflow-wrap: anywhere;
    }

    &-link {
      vertical-align: baseline;
    }

    &-more {
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--map-base-dusk-symbol-2, #374151);
      font-size: 18px;
      line-height: 1;
      border-radius: 4px;

      &:hover {
        background: var(--map-ground-level-2-background, #eef0f3);
      }

      &:focus-visible {
        outline: 2px solid var(--map-base-brand-stroke-0, #6366f1);
        outline-offset: 2px;
      }
    }
  }
}
</style>
