<script setup lang="ts">
import { ref } from "vue";

let modal = ref<HTMLDialogElement | null>(null);

const formdata = {officiel_des_spectacles: {enabled: true, url: ""}}

const openModal = () => modal.value?.showModal();
const closeModal = () => modal.value?.close();

const addMovie = () => {
    console.log(formdata.officiel_des_spectacles.url)
    closeModal()
}

</script>


<template>
    <button class="btn btn-ghost normal-case" @click="openModal">Add movie</button>

    <dialog ref="modal" id="add_movie_modal" class="modal">
        <form method="dialog" class="modal-box w-11/12 max-w-5xl">
            <h3 class="font-bold text-lg mb-10">Add Movie</h3>

            <div class="flex flex-1 flex-row space-x-10 items-end">
                <input type="checkbox" class="checkbox" v-model="formdata.officiel_des_spectacles.enabled"/>
                <p>L'Officiel des Spectacles</p>
                <input type="text" placeholder="Movie URL" class="input input-bordered input-sm w-full max-w-xs" v-model="formdata.officiel_des_spectacles.url"/>
            </div>

            <div class="modal-action">
                <button class="btn" @click="addMovie">OK</button>
                <button class="btn" @click="closeModal">Cancel</button>
            </div>
        </form>
    </dialog>
</template>