<script setup lang="ts">
import DocsComponents from "@/components/docs/DocsComponents.vue";
import { GrButton } from "@/components";
import { ref } from "vue";

type VariantType = "primary" | "secondary" | "alternative" | "orange" | "red" | "green-dark" | "gray-dark";

const text = ref("Greenn");
const disabled = ref(false);
const outline = ref(false);
const variant = ref<VariantType>("primary");
const variants = ref<VariantType[]>([
  "primary",
  "secondary",
  "alternative",
  "orange",
  "red",
  "green-dark",
  "gray-dark",
]);
const loading = ref(false);
const fullSize = ref(false);

function changeVariant(event: Event) {
  const target = event.target as HTMLSelectElement;
  variant.value = target.value as VariantType;
}
</script>

<template>
  <DocsComponents>
    <template v-slot:name>Button</template>
    <template v-slot:component>
      <GrButton :disabled="disabled" :outline="outline" :variant="variant" :loading="loading" :full-size="fullSize">{{
        text
      }}</GrButton>
    </template>

    <template v-slot:props>
      <div class="form-container">
        <div class="form-group">
          <label for="text">Conteúdo do botão</label>
          <input id="text" v-model="text" type="text" />
        </div>

        <div class="form-group">
          <label for="variants">Variantes do Botão</label>
          <select id="variants" name="variants" @change="changeVariant">
            <option v-for="(variant, index) in variants" :key="index" :value="variant">
              {{ variant }}
            </option>
          </select>
        </div>

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

        <div class="form-group checkbox">
          <label for="outline">Outline</label>
          <input id="outline" v-model="outline" 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">Full Size</label>
          <input id="loading" v-model="fullSize" type="checkbox" />
        </div>
      </div>
    </template>
  </DocsComponents>
</template>

<style lang="scss" scoped>
.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>
