<template>
  <Modal :is-open="isOpen" @close="close" title="New project" :initialWidth="400" :initialHeight="320">
    <div class="px-2 pt-2 pb-1">
      <form @submit.prevent="handleSubmit">
        <div class="grid grid-cols-2 gap-4 mb-3">
          <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Width</label>
            <div class="relative">
              <input v-model.number="width" type="number" min="1" required class="w-full pl-3 pr-8 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" />
              <span class="absolute right-3 top-2 text-gray-400 text-xs">px</span>
            </div>
          </div>
          <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Height</label>
            <div class="relative">
              <input v-model.number="height" type="number" min="1" required class="w-full pl-3 pr-8 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" />
              <span class="absolute right-3 top-2 text-gray-400 text-xs">px</span>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-4">
          <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Columns</label>
            <input v-model.number="columns" type="number" min="1" max="20" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" />
          </div>
          <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Rows</label>
            <input v-model.number="rows" type="number" min="1" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" title="Rows are dynamic but this sets an initial expectation" />
          </div>
        </div>

        <div class="flex justify-end gap-3">
          <button type="button" @click="close" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary" :disabled="!isValid">Create project</button>
        </div>
      </form>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue';
  import Modal from '@/components/utilities/Modal.vue';

  const props = defineProps<{
    isOpen: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'close'): void;
    (e: 'create', config: { width: number; height: number; columns: number; rows: number }): void;
  }>();

  const width = ref(64);
  const height = ref(64);
  const columns = ref(8);
  const rows = ref(8);

  const isValid = computed(() => {
    return width.value > 0 && height.value > 0 && columns.value > 0 && rows.value > 0;
  });

  // Reset to defaults when opened
  watch(
    () => props.isOpen,
    val => {
      if (val) {
        width.value = 64;
        height.value = 64;
        columns.value = 8;
        rows.value = 8;
      }
    }
  );

  const close = () => emit('close');
  const handleSubmit = () => {
    if (isValid.value) {
      emit('create', {
        width: width.value,
        height: height.value,
        columns: columns.value,
        rows: rows.value,
      });
      close();
    }
  };
</script>
