<script setup>
import { q, m } from "#imports";
import { ref, computed } from "vue";
let { my } = await q({
  my: {
    styles: true
  }
});
const defaultStyle = {
  table: {
    dense: true,
    flat: true,
    bordered: true,
    square: false,
    separator: "cell"
  },
  card: {
    flat: true,
    bordered: true,
    square: false
  },
  button: {
    outline: false,
    flat: false,
    unelevated: false,
    rounded: false,
    push: false,
    square: false,
    glossy: false,
    dense: false
  },
  input: {
    filled: false,
    outlined: true,
    standout: false,
    borderless: false,
    standout: false,
    rounded: false,
    dense: false,
    square: false,
    stackLabel: true
  }
};
const styles = ref({
  table: my.styles.table === void 0 ? JSON.parse(JSON.stringify(defaultStyle.table)) : my.styles.table,
  card: my.styles.card === void 0 ? JSON.parse(JSON.stringify(defaultStyle.card)) : my.styles.card,
  button: my.styles.button === void 0 ? JSON.parse(JSON.stringify(defaultStyle.button)) : my.styles.button,
  input: my.styles.input === void 0 ? JSON.parse(JSON.stringify(defaultStyle.input)) : my.styles.input
});
const onSave = async () => {
  await m("updateMyStyles", {
    value: styles.value
  });
  window.location.reload();
};
const setDefault = () => {
  styles.value = JSON.parse(JSON.stringify(defaultStyle));
};
const columns = [
  { name: "action" },
  { name: "name", label: "Name", align: "left", field: "name", sortable: true },
  { name: "phone", label: "Phone", align: "left", field: "phone", sortable: true }
];
const preview = ref({});
const inputDesign = computed({
  set: (value) => {
    styles.value.input.filled = value === "filled";
    styles.value.input.outlined = value === "outlined";
    styles.value.input.standout = value === "standout";
    styles.value.input.borderless = value === "borderless";
  },
  get: () => {
    if (styles.value.input.filled) return "filled";
    if (styles.value.input.outlined) return "outlined";
    if (styles.value.input.standout) return "standout";
    if (styles.value.input.borderless) return "borderless";
    return "none";
  }
});
</script>

<template>
    <div class="q-pa-md">
        <l-row>
            <l-col md="6">
                <l-card title="Table" minimizable class="col-12">
                    <q-card-section>
                        <q-toggle v-model="styles.table.dense" label="Dense" />
                        <q-toggle v-model="styles.table.flat" label="Flat" />
                        <q-toggle v-model="styles.table.bordered" label="Bordered" />
                        <q-toggle v-model="styles.table.square" label="Square" />

                        <q-field :label="`Separator`" stack-label>
                            <q-option-group v-model="styles.table.separator" inline :options="[
                                { label: 'Horizontal', value: 'horizontal' },
                                { label: 'Vertical', value: 'vertical' },
                                { label: 'Cell', value: 'cell' },
                                { label: 'None', value: 'none' },
                            ]" />
                        </q-field>

                    </q-card-section>
                </l-card>

                <l-card title="Card" minimizable>
                    <q-card-section>
                        <q-toggle v-model="styles.card.flat" label="Flat" />
                        <q-toggle v-model="styles.card.bordered" label="Bordered" />
                        <q-toggle v-model="styles.card.square" label="Square" />
                    </q-card-section>
                </l-card>

                <l-card title="Button" minimizable>
                    <q-card-section>
                        <q-toggle v-model="styles.button.outline" label="Outline" />
                        <q-toggle v-model="styles.button.flat" label="Flat" />
                        <q-toggle v-model="styles.button.unelevated" label="Unelevated" />
                        <q-toggle v-model="styles.button.rounded" label="Rounded" />
                        <q-toggle v-model="styles.button.push" label="Push" />
                        <q-toggle v-model="styles.button.square" label="Square" />
                        <q-toggle v-model="styles.button.glossy" label="Glossy" />
                        <q-toggle v-model="styles.button.dense" label="Dense" />

                    </q-card-section>
                </l-card>

                <l-card title="Input" minimizable>
                    <q-card-section>

                        <q-option-group v-model="inputDesign" inline :options="[
                            { label: 'None', value: 'none' },
                            { label: 'Filled', value: 'filled' },
                            { label: 'Outlined', value: 'outlined' },
                            { label: 'Standout', value: 'standout' },
                            { label: 'Borderless', value: 'borderless' },
                        ]" />

                        <q-toggle v-model="styles.input.rounded" label="Rounded" />
                        <q-toggle v-model="styles.input.dense" label="Dense" />
                        <q-toggle v-model="styles.input.square" label="Square" />
                        <q-toggle v-model="styles.input.stackLabel" label="Stack label" />
                    </q-card-section>
                </l-card>

                <l-btn @click="setDefault()" icon="sym_o_refresh" label="Default"></l-btn>
                <l-btn icon="sym_o_save" label="Save" @click="onSave" />
            </l-col>

            <l-col md="6">
                <q-card v-bind="styles.card">
                    <q-toolbar>
                        <q-toolbar-title>UI preview</q-toolbar-title>
                    </q-toolbar>
                    <q-card-section class="q-gutter-md">

                        <q-btn color="primary" icon="sym_o_person" label="Button" v-bind="styles.button"></q-btn>

                        <q-input label="Input" v-bind="styles.input" />

                        <q-select label="Select" v-bind="styles.input" :options="[
                            { label: 'A', value: 'a' },
                            { label: 'B', value: 'b' },
                            { label: 'C', value: 'c' }
                        ]" v-model="preview.select" />

                        <q-table :columns="columns" :rows="[
                            { name: 'A', phone: '123' },
                            { name: 'B', phone: '456' },
                            { name: 'C', phone: '789' },
                        ]" v-bind="styles.table" selection="multiple" title="Table">

                            <template #body-cell-action="props">
                                <q-td auto-width>
                                    <q-btn flat round icon="sym_o_search" size="sm"></q-btn>
                                </q-td>
                            </template>
                        </q-table>

                    </q-card-section>

                </q-card>

            </l-col>

        </l-row>
    </div>
</template>
