<script setup lang="ts">
import SpecsForm from "@/components/SpecsForm.vue";
import {reactive, ref, watch} from "vue";
import {type Field, fields, type Specs} from "@/urlmaker/specs.ts";
import Btn from "@/components/Btn.vue";
import Copyable from "@/components/Copyable.vue";
import EditUrlModal from "@/components/EditUrlModal.vue";

const emptySpecs = fields.reduce((o, f) => {
  o[f.name] = f.default;
  return o
}, {} as Specs);
const specs = reactive(emptySpecs);
const formValid = ref(false);

watch(specs, (value, oldValue) => {
  formValid.value = fields.every(field => (
    specs[field.name].length === 0 && !(field as Field).required || field.validate(specs[field.name]).ok
  ));
});

const existingLink = ref("");
const link = ref("");
const editModalVisible = ref(false);

</script>

<template>
  <div class="wrapper">
    <SpecsForm v-model="specs" class="specs-form"></SpecsForm>
    <Btn :active="formValid">Generate link</Btn>
    <Btn :active="formValid">Screenshot</Btn>
    <Btn @click="editModalVisible = true">Edit existing task</Btn>
    <Copyable v-if="link" :contents="link" class="link-view"></Copyable>
    <EditUrlModal :visible="editModalVisible" @close="editModalVisible = false"
                  v-model="existingLink"></EditUrlModal>
  </div>
</template>

<style scoped lang="scss">
div.wrapper {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.specs-form {
  margin-bottom: 15px;
}

.link-view {
  margin-top: 15px !important;
}
</style>
