<template>
  <v-row justify="center">
    <v-dialog
      v-model="model"
      fullscreen
      :scrim="false"
      :loading="model"
      transition="dialog-bottom-transition"
    >
      <v-card color="#c6d7f7">
        <v-toolbar dark color="#c6d7f7" class="py-5">
          <div class="w-100 d-flex justify-start px-7">
            <h3>{{ title }}</h3>
          </div>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn icon dark @click="$emit('editModal', false)">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <div class="d-flex justify-center flex-wrap w-100 pb-10">
          <v-row class="w-50 px-10">
            <v-text-field
              v-model="textField"
              :label="label"
              color="#504B6C"
            ></v-text-field>
          </v-row>
          <v-spacer></v-spacer>
          <v-row class="d-flex flex-wrap align-end w-50 px-10">
            <v-btn
              class="w-50"
              variant="text"
              @click="$emit('confirmButton', textField)"
            >
              Inserir padrões
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn
              class="w-50"
              variant="text"
              @click="$emit('deleteButton', true)"
            >
              Excluir Todos
            </v-btn>
          </v-row>
        </div>
        <v-divider></v-divider>
      </v-card>
    </v-dialog>
  </v-row>
</template>

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

defineProps({
  model: { type: Boolean, required: true },
  label: { type: String, required: true },
  title: { type: String, required: true }
});

const textField = ref<number>();
</script>
