<template>
  <div class="container">
    <h1>Viewer</h1>
    <h2>Viewer</h2>
    <SmartViewer :definition="demoDefinition" :row="demoRow" />

    <h2>Viewer Field</h2>
    <SmartViewer :definition="demoDefinition" :row="demoRow">
      <SmartViewerField name="field1" />
    </SmartViewer>

    <h2>Viewer Custom Field</h2>
    <SmartViewer :definition="demoDefinition" :row="demoRow">
      <SmartViewerCustomField module="demo" />
    </SmartViewer>

    <h2>Phone</h2>
    <SmartPhone />

    <h1>Editor</h1>
    <h2>Editor</h2>
    <SmartEditor :definition="demoDefinition" :row="demoRow" :loading="false" :save="() => { successHandler('Done!') }">
      Fields or Fieldets go here
    </SmartEditor>

    <h2>Editor Fieldset</h2>
    <SmartEditor :definition="demoDefinition" :row="demoRow" :loading="false" :save="() => { successHandler('Done!') }">
      <SmartEditorFieldset :definition="demoDefinition" :row="demoRow">
        The fieldset lets you add fields from another definition
      </SmartEditorFieldset>
    </SmartEditor>

    <h2>Editor Field</h2>
    <SmartEditorFieldset :definition="demoDefinition" :row="demoRow" :loading="false" :save="() => { successHandler('Done!') }">
      <SmartEditorField v-model="demoRow.field1" name="field1" />
      <SmartEditorField v-model="demoRow.field2" name="field2" />
      <SmartEditorField v-model="demoRow.field3" name="field3" />
    </SmartEditorFieldset>

    <h2>Editor Custom Field</h2>
    <SmartEditorFieldset :definition="demoDefinition" :row="demoRow">
      <SmartEditorCustomField module="demo" />
    </SmartEditorFieldset>

    <h2>Select</h2>
    <SmartSelect v-model="demoRow.field1" />

    <h2>Autocomplete</h2>
    <SmartAutocomplete v-model="demoRow.field1" />

    <h2>Rte</h2>
    <SmartRte v-model="demoRow.field1" />

    <h1>Modal</h1>
    <h2>Modal</h2>
    <SmartModal v-if="showModal" @close="showModal=false">
      <template #header>
        I'm a header
      </template>
      <template #body>
        This is a smart modal body!
      </template>
    </SmartModal>
    <button type="button" class="btn btn-success me-2" @click="showModal=true">Show Modal</button>

    <h1>Cards</h1>
    <h2>Card</h2>
    <SmartCard header="This is a smart card header" :collapsed="false">This is a smart card body!</SmartCard>

    <SmartCard title="This is a smart card title" :collapsed="true">This is a smart card  body!</SmartCard>

    <h2>Card Tabs</h2>
    <SmartCardTabs :tabs="{notes: 'Notes', contacts: 'Contacts', documents: 'Documents', emails: 'Emails'}">
      <template #notes="meta">
        <div v-if="!meta.collapsed">notes</div>
      </template>
      <template #contacts="meta">
        <div v-if="!meta.collapsed">contacts</div>
      </template>
      <template #documents="meta">
        <div v-if="!meta.collapsed">documents</div>
      </template>
      <template #emails="meta">
        <div v-if="!meta.collapsed">emails</div>
      </template>
    </SmartCardTabs>

    <h1>Links</h1>
    <h2>Download Links</h2>
    <SmartDownloadLink module="test" param="123">click me</SmartDownloadLink>

    <h2>Module Link</h2>
    <SmartModuleLink :to="{path: '/level2'}">click me</SmartModuleLink>

    <h1>Misc</h1>
    <h2>Breadcrumb</h2>
    <SmartBreadcrumb />

    <h2>Timestamps</h2>
    <SmartTimestamps :row="{create_username: 'bob', create_date: '2021-01-01', mod_username: 'bob', mod_date: '2021-01-01'}" />

    <h2>Feedback</h2>
    <button type="button" class="btn btn-success me-2" @click="successHandler('Done!')">Sucess Feedback</button>
    <button type="button" class="btn btn-warning me-2" @click="warnHandler('Watch Out!')">Warning Feedback</button>
    <button type="button" class="btn btn-danger me-2" @click="errorHandler('Ouch!')">Error Feedback</button>
    <SmartFeedback />

  </div>
</template>
<script>

import {ref} from 'vue'

import {
  SmartDownloadLink, SmartPhone, SmartRte, SmartModal, SmartModuleLink, SmartFeedback, SmartBreadcrumb, SmartCard, SmartCardTabs, SmartTimestamps, SmartAutocomplete, SmartSelect, SmartEditor, SmartEditorField, SmartEditorCustomField, SmartEditorFieldset, SmartViewer, SmartViewerField, SmartViewerCustomField
} from './components'

import useFeedback from './components/hooks/feedback'

import '@fortawesome/fontawesome-free/css/all.css'

import { configureSmartValidation } from './components/validations'

export default {
  name: 'App',
  components: {
    SmartDownloadLink, SmartPhone, SmartRte, SmartModal, SmartModuleLink, SmartFeedback, SmartBreadcrumb, SmartCard, SmartCardTabs, SmartTimestamps, SmartAutocomplete, SmartSelect, SmartEditor, SmartEditorField, SmartEditorCustomField, SmartEditorFieldset, SmartViewer, SmartViewerField, SmartViewerCustomField
  },
  setup: () => {
    configureSmartValidation()

    const showModal = ref(false)
    const { successHandler, errorHandler, warnHandler } = useFeedback()

    const demoDefinition = {
      "model":"demo",
      "ordering":["field1"],
      "fields":{
        "field1":{
          "primary_key":false,
          "default":null,
          "generated_default":false,
          "type":"CharField",
          "max_length":50,
          "blank":false,
          "editable":true
        },
        "field2":{
          "primary_key":false,
          "default":null,
          "generated_default":false,
          "type":"CharField",
          "max_length":3,
          "blank":false,
          "editable":true
        },
        "field3":{
          "primary_key":false,
          "default":null,
          "generated_default":false,
          "type":"CharField",
          "max_length":2,
          "blank":true,
          "editable":true
        },
        "field4":{
          "primary_key":false,
          "default":null,
          "generated_default":false,
          "type":"CharField",
          "max_length":3,
          "blank":true,
          "editable":true
        }
      }
    }

    const demoRow = {"field1": "abc", "field2": "def", "field3": "ghi"}

    return {demoDefinition, demoRow, successHandler, errorHandler, warnHandler, showModal}
  },
}
</script>
<style scoped>
  h1 {
    margin-top: 4rem;
  }
  h2 {
    margin-top: 1rem;
  }
</style>
