<script lang="ts" setup>
import { mockSetupInit } from '../../../-helper/mock-setup'
import MockInjection from '../../MockInjection.vue'

const vModel = ref([])
const rootMeta = ref({})
const { metas } = useMetas()
const columns = computedAsync(async () => {
  if (!metas.value || Object.keys(metas.value).length === 0) return []
  return await composeColumnsForFilter({
    rootMeta: rootMeta.value,
    getMeta: async (id) => metas.value[`${rootMeta.value?.base_id}:${id}`],
  })
}, [])
const options1 = ref({
  filtersCount: 0,
  filterPerViewLimit: 5,
  disabled: false,
  isLockedView: false,
  disableAddNewFilter: false,
  dbClientType: ClientType.PG,
})
onMounted(async () => {
  const setup = await mockSetupInit()
  rootMeta.value = setup.meta
})
</script>

<template>
  <MockInjection>
    <div class="bg-nc-bg-gray-light overflow-auto pb-8">
      <a-card>
        <h4>Simple</h4>
        <div class="flex gap-4">
          <div class="flex flex-col gap-2">
            <div><NcSwitch v-model:checked="options1.disabled">disabled</NcSwitch></div>
            <div><NcSwitch v-model:checked="options1.isLockedView">isLockedView</NcSwitch></div>
            <div><NcSwitch v-model:checked="options1.disableAddNewFilter">disableAddNewFilter</NcSwitch></div>
          </div>
          <div class="flex-col gap-2">
            <div class="flex-col space-y-2">
              <div>
                dbClientType:
                <NcSelect v-model:value="options1.dbClientType">
                  <a-select-option value="PG">PG</a-select-option>
                  <a-select-option value="MYSQL">mysql</a-select-option>
                  <a-select-option value="SQLITE">sqlite</a-select-option>
                </NcSelect>
              </div>
              <div>
                filterPerViewLimit:
                <input
                  v-model="options1.filterPerViewLimit"
                  type="number"
                  class="text-xs p-1 border-nc-border-gray-medium"
                /><br />
              </div>
              <div>
                filtersCount:
                <input v-model="options1.filtersCount" type="number" class="text-xs p-1 border-nc-border-gray-medium" /><br />
              </div>
            </div>
          </div>
          <div class="flex-col flex-grow space-y-2">
            vModel:
            <div class="min-w-[300px] max-h-[200px] overflow-wrap bg-nc-bg-gray-dark overflow-y-scroll">
              <pre>{{ JSON.stringify(vModel, null, 2) }}</pre>
            </div>
          </div>
        </div>
      </a-card>
      <div class="m-4">
        <SmartsheetToolbarRowColorFilterUsingFilterPanel
          v-model="vModel"
          :columns="columns"
          :filters-count="options1.filtersCount"
          :filter-per-view-limit="options1.filterPerViewLimit"
          :disabled="options1.disabled"
          :is-locked-view="options1.isLockedView"
          :db-client-type="options1.dbClientType"
          :disable-add-new-filter="options1.disableAddNewFilter"
        />
      </div>
    </div>
  </MockInjection>
</template>
