<script setup lang="ts">
import DocsComponents from "@/components/docs/DocsComponents.vue";
import { GrButton } from "@/components";
import { GrModal, GrModalClose, GrModalContent, GrModalFooter, GrModalHeader } from "@/components/modal";
import { ref } from "vue";

type ModalSize = "sm" | "md" | "lg" | "xl";

const isModalOpen = ref(false);
const loading = ref(false);
const canClose = ref(true);

const size = ref<ModalSize>("sm");
const sizes = ref<ModalSize[]>(["sm", "md", "lg", "xl"]);
</script>

<template>
  <DocsComponents>
    <template v-slot:name>Modal</template>
    <template v-slot:component>
      <GrModal v-model="isModalOpen" :close="canClose">
        <template #open>
          <GrButton variant="secondary">Open Modal </GrButton>
        </template>

        <GrModalContent :size="size" :loading="loading">
          <GrModalHeader> Titulo do modal </GrModalHeader>

          <div class="content-modal">
            <span>Área do conteúdo</span>
          </div>

          <GrModalFooter>
            <GrModalClose>
              <GrButton>Fechar</GrButton>
            </GrModalClose>
            <GrButton variant="green-dark">Salvar</GrButton>
          </GrModalFooter>
        </GrModalContent>
      </GrModal>
    </template>

    <template v-slot:props>
      <div class="form-container">
        <div class="form-group">
          <label for="variants">variants</label>
          <select id="variants" v-model="size" name="variants">
            <option v-for="(size, index) in sizes" :key="index" :value="size">
              {{ size }}
            </option>
          </select>
        </div>

        <div class="form-group checkbox">
          <label for="disabled">v-model</label>
          <input id="disabled" v-model="isModalOpen" type="checkbox" />
        </div>

        <div class="form-group checkbox">
          <label for="loading">loading</label>
          <input id="loading" v-model="loading" type="checkbox" />
        </div>

        <div class="form-group checkbox">
          <label for="loading">close</label>
          <input id="loading" v-model="canClose" type="checkbox" />
        </div>
      </div>
    </template>
  </DocsComponents>
</template>

<style lang="scss" scoped>
.content-modal {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  background: #f7f7f7;

  span {
    color: #81858e;

    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);

  .form-group.checkbox {
    flex-direction: row !important;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);

    label {
      font-weight: bold;
    }

    select,
    input[type="text"],
    input[type="checkbox"] {
      padding: var(--spacing-2);
      font-size: var(--font-base);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius);
    }

    input[type="checkbox"] {
      width: var(--w-5);
      height: var(--h-5);
    }
  }
}
</style>
