<template>
  <div class="modal-test">
    <h1>Modal Test</h1>
    <p class="subtitle">A reusable modal component for displaying content in a popup dialog.</p>

    <div class="section">
      <h2>Basic Modal</h2>
      <p>A simple modal with a title and content.</p>

      <Action label="Open Basic Modal" @click="showBasicModal = true" />

      <Modal v-model="showBasicModal" title="Basic Modal Example" icon="info-circle" modal-class="basic-modal">
        <p>This is a basic modal example with default styling.</p>
        <p>The modal can be closed by clicking the X button in the top right corner.</p>
      </Modal>
    </div>

    <div class="section">
      <h2>Custom Styled Modal</h2>
      <p>A modal with custom styling options and custom header/footer content.</p>

      <Action label="Open Custom Modal" @click="showCustomModal = true" />

      <Modal v-model="showCustomModal" min-width="400px" max-width="600px" title-bar-color="var(--primary-color)"
        background-color="#f9f9f9" icon="user" is-large-icon iconColor="var(--primary-color-light)">
        <template #header>
          <div class="custom-header">
            <h3>Custom Modal Header</h3>
          </div>
        </template>

        <template #footer>
          <div class="custom-footer">
            <Action label="Cancel" variant="transparent" @click="showCustomModal = false" />
            <Action label="Save" @click="saveAndClose" />
          </div>
        </template>

        <div class="custom-content">
          <p>This modal has custom styling and a custom header.</p>
          <p>You can use slots to customize the header, body, and footer.</p>

          <div class="form-group">
            <TextInput v-model="inputValue" label="Name" placeholder="Enter your name..." />
          </div>

          <div class="form-group">
            <Dropdown v-model="selectedOption" :options="dropdownOptions" label="Select an option"
              placeholder="Choose an option..." />
          </div>
        </div>
      </Modal>
    </div>

    <div class="section">
      <h2>Form Modal Example</h2>
      <p>A modal containing a form that can be submitted.</p>

      <Action label="Open Form Modal" @click="showFormModal = true" />

      <Modal v-model="showFormModal" title="Form Submission">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <TextInput v-model="formData.name" label="Name" placeholder="Enter your name" required />
          </div>

          <div class="form-group">
            <TextInput v-model="formData.email" label="Email" type="email" placeholder="Enter your email" required />
          </div>

          <div class="form-group">
            <TextInput v-model="formData.message" label="Message" type="textarea" placeholder="Enter your message" />
          </div>

          <div class="form-actions">
            <Action label="Cancel" variant="transparent" @click="showFormModal = false" />
            <Action label="Submit" type="submit" />
          </div>
        </form>
      </Modal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Modal from '../components/Modal.vue'
import Action from '../components/Action.vue'
import TextInput from '../components/TextInput.vue'
import Dropdown from '../components/Dropdown.vue'

// Basic Modal
const showBasicModal = ref(false)

// Custom Modal
const showCustomModal = ref(false)
const inputValue = ref('')
const selectedOption = ref('')
const dropdownOptions = [
  { id: 'option1', value: 'option1', label: 'Option 1' },
  { id: 'option2', value: 'option2', label: 'Option 2' },
  { id: 'option3', value: 'option3', label: 'Option 3' }
]

// Form Modal
const showFormModal = ref(false)
const formData = ref({
  name: '',
  email: '',
  message: ''
})

// Methods
const saveAndClose = () => {
  alert(`Name: ${inputValue.value}\nSelected Option: ${selectedOption.value}`)
  showCustomModal.value = false
}

const submitForm = () => {
  alert(`Form submitted!\nName: ${formData.value.name}\nEmail: ${formData.value.email}\nMessage: ${formData.value.message}`)
  showFormModal.value = false

  // Reset form
  formData.value = {
    name: '',
    email: '',
    message: ''
  }
}
</script>

<style scoped>
.modal-test {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

h1 {
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: var(--background-color, #ffffff);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.section p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.custom-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-color, #4AAE9B);
}

.custom-header h3 {
  margin: 0;
  color: var(--primary-color, #4AAE9B);
}

.custom-content {
  padding: 1rem 0;
}

.custom-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.form-group {
  margin-bottom: 1rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
</style>
