<template>
  <FormWrapper
    class="multiple-upload"
    :class="states"
    :label="label"
    :error="error"
    :tooltip="tooltip"
  >
    <input
      :id="id"
      ref="file"
      type="file"
      :accept="acceptTypes"
      @input="handleFileChange"
    />

    <div class="wrapper">
      <label v-if="fileList.length === 0" :for="id" class="default">
        <div class="icon-wrapper">
          <div class="icon lg-x-large fill-blue">
            <SpIcon name="sp-upload" />
          </div>
        </div>

        <div class="instructions class h700">
          <p v-if="firstInstruction" v-html="firstInstruction"></p>
          <p v-if="secondInstruction" v-html="secondInstruction"></p>
        </div>
      </label>
      <div v-else class="file-list">
        <UploadSlot
          v-for="(file, index) in fileList"
          :key="index"
          :file="file"
          @remove="remove(index)"
        />

        <label :for="id" class="add-more" v-if="fileList.length < fileLimit">
          <div class="icon-container">
            <div class="icon lg-x-large fill-blue">
              <SpIcon name="sp-upload" />
            </div>
          </div>

          <p class="h800">
            <span>{{ $t("common.addMore") }}</span>
          </p>
        </label>
      </div>
    </div>
  </FormWrapper>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  reactive,
  Ref,
  ref,
  toRefs,
} from "vue";
import FormWrapper from "../FormWrapper.vue";
import FormMixin from "@/mixins/FormMixin";

export default defineComponent({
  mixins: [FormMixin],
  components: { FormWrapper },
  props: {
    id: {
      type: String,
      default: "document-upload",
    },
    firstInstruction: {
      type: String,
      default: "First Instruction",
    },
    secondInstruction: {
      type: String,
      default: "Second Instruction",
    },
    accept: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
    fileLimit: {
      type: Number,
      default: 10,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const fileList: Ref<File[]> = ref([]);

    const refs = reactive({
      file: null,
    });

    const acceptTypes = computed(() => {
      return props.accept.join(", ");
    });

    const remove = (index: number): void => {
      fileList.value.splice(index, 1);

      emit("update:modelValue", fileList.value);
    };

    const handleFileChange = (): void => {
      const files = refs.file.files;

      if (files.length > 0 && fileList.value.length < props.fileLimit) {
        const file = files[0];

        if (!props.accept.find((item) => item === file.type)) {
          return;
        }

        fileList.value.push(files[0]);
      }

      refs.file.value = null;
      emit("update:modelValue", fileList.value);
    };

    return {
      fileList,
      ...toRefs(refs),
      acceptTypes,
      remove,
      handleFileChange,
    };
  },
});
</script>

<style scoped lang="scss">
.multiple-upload {
  // input {
  //   display: none;
  //   opacity: 0;
  // }

  .wrapper {
    border: 1px solid var(--form-border-color);
    transition: var(--transition);
    min-height: 180px;
    border-radius: 16px;
    display: flex;
    align-items: center;

    .default {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 32px;
      width: 100%;
      height: 100%;

      .icon-wrapper {
        width: 88px;
        height: 88px;
        margin-right: 24px;
        background-color: var(--grey-6);
        border-radius: 16px;
        display: flex;

        .icon {
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .instructions {
        & > :last-child {
          color: var(--text-color-secondary);
        }
      }
    }

    .file-list {
      padding: 32px;
      display: flex;
      flex-wrap: wrap;

      .upload-slot {
        margin-right: 32px;
        margin-bottom: 16px;
      }

      .add-more {
        cursor: pointer;
        width: 88px;

        .icon-container {
          width: 100%;
          height: 88px;
          background-color: var(--grey-6);
          border-radius: 16px;

          .icon {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        p {
          color: var(--blue);
          margin-top: 8px;
          position: relative;

          span {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }

    &:hover {
      --form-border-color: var(--form-border-color-active);
    }
  }

  &.error {
    .wrapper {
      border-color: var(--red);
    }
  }
}
</style>
