<!--

-->
<template>
    <div class="px-vue-test">
        <px-tester>
            <px-test test-id="px-nine-grid" name="px-nine-grid" :size="{ h: 300 }">
                <px-nine-grid
                    slice="50"
                    src="https://harnerdesigns.com/wp-content/uploads/2018/08/border.svg"
                    :src-width="300"
                    :src-height="300"
                    :style="{ width: cssPcnt(1), height: cssPcnt(1) }"
                />
            </px-test>

            <px-test test-id="px-card-grd" name="px-card-grid" :size="{ h: 300 }">
                <px-card-grid />
            </px-test>

            <px-test test-id="px-fit" name="px-fit" :size="{ h: 300 }">
                <px-fit :fits="['lg', 'md', 'sm']" :debug="false">
                    <template #default="{ fit }">
                        <div :class="`fit fit--${fit}`">
                            <span v-if="fit == 'lg'">LARGE</span>
                            <span v-if="fit == 'md'">MEDIUM</span>
                            <span v-if="fit == 'sm'">SMALL</span>
                            One Two Three Four Five Size Seven Eight Nine Ten
                        </div>
                    </template>
                </px-fit>
            </px-test>

            <px-test test-id="px-table" name="px-table" :size="{ h: 300 }">
                <!--
                id: 'orange',
                name: 'Orange',
                color: 'orange',
                deliciousNess: 8,
                lastPurchase: new Date('2022-02-01T00:00:00.000Z'),

                -->

                <px-table
                    :items="fruits"
                    items-key-property="id"
                    :columns="[
                        {
                            property: 'name',
                            align: 'start',
                        },
                        {
                            template: 'color',
                            headerTemplate: 'color-header',
                            label: 'COLOR',
                            sortable: false,
                        },
                        {
                            property: 'deliciousNess',
                        },
                        {
                            property: 'description',
                            overflow: 'ellipsis',
                            align: 'start',
                        },
                        {
                            property: 'lastPurchase',
                        },
                    ]"
                >
                    <!-- color column slot -->
                    <template #color="{ item }">
                        <div
                            :style="{
                                width: '1em',
                                height: '1em',
                                borderRadius: '50%',
                                backgroundColor: item.color,
                            }"
                        />
                    </template>

                    <!-- color-header column header slot -->
                    <template #color-header>
                        <div
                            :style="{
                                width: '1em',
                                height: '1em',
                                borderRadius: '50%',
                                background: 'silver',
                            }"
                        />
                    </template>
                </px-table>
            </px-test>
            <px-test test-id="px-validator" name="px-validator">
                <px-flex vertical :style="{ maxWidth: '400px', margin: '0 auto' }" gap="1">
                    <span>Has errors: {{ !allValid }}</span>

                    <px-validator
                        :value="validateThree"
                        @valid-changed="onValidChanged"
                        :rules="{
                            apple: val => {
                                if (val !== 'apple') {
                                    return 'Must be apple';
                                }
                            },
                        }"
                    >
                        <px-dropdown
                            v-model:selected="validateThree"
                            tag="button"
                            trigger="click"
                            :items="fruits"
                            items-value-property="id"
                            items-label-property="name"
                            items-key-property="id"
                            placeholder="Select a fruit..."
                        ></px-dropdown>
                    </px-validator>

                    PHONE
                    <br />
                    <px-validator
                        :value="validateOne"
                        rules="required phone"
                        @valid-changed="onValidChanged"
                    >
                        <template #default="v">
                            <px-textbox
                                v-model:text="validateOne"
                                :class="[v.class, v.requiredClass, v.violationClasses]"
                            />
                        </template>
                    </px-validator>

                    <px-validator
                        :value="validateTwo"
                        rules="required"
                        @valid-changed="onValidChanged"
                    >
                        <template #default="v">
                            <px-textbox
                                v-model:text="validateTwo"
                                :class="[v.class, v.requiredClass, v.violationClasses]"
                            />
                        </template>
                    </px-validator>
                </px-flex>
            </px-test>

            <px-test test-id="px-progress-circle" name="px-progress-circle">
                <px-progress-circle
                    :progress="0.5"
                    :stroke-width="4"
                    style="width: 60px; color: black"
                />
            </px-test>

            <px-test test-id="px-aspect" name="px-aspect">
                <px-aspect :debug="true">
                    <div :style="{ backgroundColor: 'gold' }">
                        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere
                        consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat
                        porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel
                        augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
                        ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Duis
                        mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
                        odio sem nec elit.
                    </div>

                    <img
                        :style="{ opacity: 0.5 }"
                        src="https://images.unsplash.com/photo-1650923500748-eee80ee6e7d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80"
                    />
                </px-aspect>
            </px-test>

            <px-test test-id="px-swiper-cards" name="Card Swiper">
                <div>
                    <px-swiper>
                        <px-swiper-slide>
                            <px-card>This is some content</px-card>
                        </px-swiper-slide>
                        <px-swiper-slide>
                            <px-card>This is some content</px-card>
                        </px-swiper-slide>
                        <px-swiper-slide>
                            <px-card>This is some content</px-card>
                        </px-swiper-slide>
                    </px-swiper>
                </div>

                <!-- <px-swiper :loop="true">
                    <px-swiper-slide>
                        <div class="swiper-max-width">
                            <img
                                class="swiper-img"
                                src="https://picsum.photos/1600/900?grayscale"
                            />
                        </div>
                    </px-swiper-slide>
                    <px-swiper-slide>
                        <img class="swiper-img" src="https://picsum.photos/1601/900?grayscale" />
                    </px-swiper-slide>
                    <px-swiper-slide>
                        <img class="swiper-img" src="https://picsum.photos/1602/900?grayscale" />
                    </px-swiper-slide>
                </px-swiper> -->
            </px-test>

            <px-test test-id="px-date-picker" name="px-date-picker">
                <px-flex vertical align="center" gap="1">
                    <span>Selected Date: {{ currentDateNull }}</span>
                    <px-date-picker mode="textbox" v-model:date="currentDateNull" />
                    <px-date-picker mode="textbox" clock v-model:date="currentDateNull" />
                    <px-date-picker v-model:date="currentDateNull" />
                    <px-date-picker time v-model:date="currentDateNull" />
                </px-flex>
            </px-test>

            <px-test test-id="px-clock" name="px-clock">
                <px-clock v-model:date="currentDate" />
                Selected Date: {{ currentDate }}
            </px-test>

            <px-test test-id="px-calendar" name="px-calendar">
                <px-calendar v-model:date="currentDate" />
                Selected Date: {{ currentDate }}
            </px-test>

            <px-test test-id="single-vs-multiple" name="Single vs Multiple Selection">
                <px-flex align="center" gap="1">
                    <!-- dynamic select -->

                    <px-toggle-button-list
                        :multi-select="supportsMultiSelect"
                        :items="fruits"
                        items-key-property="id"
                        items-value-property="id"
                        items-label-property="name"
                        v-model:selected="currentFruitOrFruits"
                    ></px-toggle-button-list>

                    <px-toggle v-model:checked="supportsMultiSelect">Multi-select</px-toggle>
                    <span>{{ currentFruitOrFruits }}</span>
                </px-flex>
            </px-test>

            <px-test test-id="px-textbox" name="px-textbox">
                <px-flex :vertical="true" :gap="1">
                    <div>currentText: {{ currentText }}</div>

                    <px-textbox v-model:text="currentText" placeholder="Say what you want..." />

                    <px-textbox
                        multiline
                        v-model:text="currentText"
                        rows="5"
                        placeholder="Say it longer..."
                    />

                    <px-textbox type="password" />
                    <px-textbox :text="'hello@thinkpixellab.com'" type="email" />
                </px-flex>
            </px-test>

            <px-test test-id="px-dropdown" name="px-dropdown">
                <px-flex gap="1" align="center" justify="center">
                    <px-dropdown
                        v-model:selected="currentFruit"
                        tag="button"
                        trigger="click"
                        :items="fruits"
                        items-value-property="id"
                        items-label-property="name"
                        items-key-property="id"
                        placeholder="Select a fruit..."
                    >
                        Button Label

                        <template #popup>
                            <div class="popup-menu">
                                <button>Menu Option 1</button>
                                <button>Menu Option 2</button>
                            </div>
                        </template>
                    </px-dropdown>
                    <span>{{ currentFruit }}</span>
                </px-flex>
            </px-test>

            <px-test test-id="px-popup" name="px-popup">
                <px-flex vertical gap="1" align="center">
                    <px-popup tag="button" trigger="click">
                        Click This Button

                        <template #popup>
                            <px-flex vertical class="popup-menu">
                                <button>Option 1</button>
                                <button>Option 2</button>
                                <button>Option 3</button>
                                <button>Option 4</button>
                            </px-flex>
                        </template>
                    </px-popup>

                    <px-popup tag="button" trigger="hover">
                        Hover Over This

                        <template #popup>
                            <px-flex vertical class="popup-menu">
                                <button>Option 1</button>
                                <button>Option 2</button>
                                <button>Option 3</button>
                                <button>Option 4</button>
                            </px-flex>
                        </template>
                    </px-popup>

                    <px-popup tag="button" trigger="contextmenu">
                        Context Menu

                        <template #popup>
                            <px-flex vertical class="popup-menu">
                                <button>Option 1</button>
                                <button>Option 2</button>
                                <button>Option 3</button>
                                <button>Option 4</button>
                            </px-flex>
                        </template>
                    </px-popup>
                </px-flex>
            </px-test>

            <px-test test-id="px-swiper" name="px-swiper" :size="{ w: 1440 }">
                <px-swiper :loop="true">
                    <px-swiper-slide>
                        <div class="swiper-max-width">
                            <img
                                class="swiper-img"
                                src="https://picsum.photos/1600/900?grayscale"
                            />
                        </div>
                    </px-swiper-slide>
                    <px-swiper-slide>
                        <img class="swiper-img" src="https://picsum.photos/1601/900?grayscale" />
                    </px-swiper-slide>
                    <px-swiper-slide>
                        <img class="swiper-img" src="https://picsum.photos/1602/900?grayscale" />
                    </px-swiper-slide>
                </px-swiper>
            </px-test>

            <px-test test-id="px-icon-button" name="px-icon-button">
                <px-flex gap="3" justify="center">
                    <px-icon-button :src="iconTrash" />

                    <px-icon-button :src="iconTrash" variant="basic" />
                    <px-icon-button :src="iconTrash" variant="basic accent-hover" />
                    <px-icon-button :src="iconTrash" variant="default accent-hover" />
                    <px-icon v-if="false" :src="iconTrash" />
                    <px-svg v-if="false" :src="iconTrash" />
                </px-flex>
            </px-test>

            <px-test test-id="toggle-button-list" name="px-toggle-button-list">
                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                />

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    :multi-select="true"
                    @change="toggleButtonChange"
                />

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    variant="radio"
                />

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    variant="vertical radio"
                />

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    variant="default connected"
                />

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                >
                    <template v-slot:item="{ item, checked }">
                        <span
                            :style="{
                                width: '0.5em',
                                height: '0.5em',
                                backgroundColor: item.color,
                                display: 'inline-block',
                                transform: checked ? 'scale(1.5)' : null,
                            }"
                        ></span>
                        {{ item.name }}
                    </template>
                </px-toggle-button-list>

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    variant="outline"
                />

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    variant="connected outline"
                />

                <br />

                <div style="max-width: 400px">
                    <px-toggle-button-list
                        :items="fruits"
                        items-value-property="id"
                        items-label-property="name"
                        items-key-property="id"
                        variant="default wrap"
                    />
                </div>

                <br />

                <px-toggle-button-list
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    variant="tags wrap"
                    :multi-select="true"
                />
            </px-test>

            <px-test test-id="px-flex" name="px-flex">
                <px-flex gap="2" class="flex-test" justify="center">
                    <px-flex :vertical="true" class="flex-test" gap="1">
                        <div class="flex-item"></div>
                        <div class="flex-item flex-item--small"></div>
                        <div class="flex-item"></div>
                    </px-flex>

                    <px-flex :vertical="true" :reverse="true" class="flex-test" gap="1">
                        <div class="flex-item"></div>
                        <div class="flex-item flex-item--small"></div>
                        <div class="flex-item"></div>
                    </px-flex>

                    <px-flex align-y="center" :vertical="false" class="flex-test" gap="20px">
                        <div class="flex-item"></div>
                        <div class="flex-item flex-item--small"></div>
                        <div class="flex-item"></div>
                    </px-flex>

                    <px-flex class="flex-test" :reverse="true" gap="0.5">
                        <div class="flex-item"></div>
                        <div class="flex-item flex-item--small"></div>
                        <div class="flex-item"></div>
                    </px-flex>
                </px-flex>
            </px-test>

            <px-test test-id="px-toggle" name="px-toggle">
                <px-toggle>Test</px-toggle>
            </px-test>

            <px-test test-id="px-toggle-button" name="px-toggle">
                <div>
                    <px-toggle-button>Test</px-toggle-button>
                </div>
            </px-test>
        </px-tester>
    </div>
</template>

<script>
import { PxTester, PxTest } from '@thinkpixellab-public/px-vue-tester';
import PxToggle from './PxToggle.vue';
import PxToggleButton from './PxToggleButton.vue';
import PxFlex from './PxFlex.vue';
import PxToggleButtonList from './PxToggleButtonList.vue';
import PxIconButton from './PxIconButton.vue';
import PxIcon from './PxIcon.vue';
import PxSvg from './PxSvg.vue';
import PxSwiper from './PxSwiper.vue';
import PxSwiperSlide from './PxSwiperSlide.vue';
import PxDropdown from './PxDropdown.vue';
import PxPopupButton from './PxPopupButton.vue';
import PxTextbox from './PxTextbox.vue';
import PxCalendar from './PxCalendar.vue';
import PxClock from './PxClock.vue';
import PxDatePicker from './PxDatePicker.vue';
import PxCard from './PxCard.vue';
import PxAspect from './PxAspect.vue';
import PxProgressCircle from './PxProgressCircle.vue';
import PxValidator from './PxValidator.vue';
import PxTable from './PxTable.vue';
import PxFit from './PxFit.vue';
import PxCardGrid from './PxCardGrid.vue';
import PxNineGrid from './PxNineGrid.vue';

import iconTrash from '../assets/test/trash.svg?url';

export default {
    name: 'px-vue-test',
    components: {
        PxTester,
        PxTest,
        PxToggle,
        PxToggleButton,
        PxFlex,
        PxToggleButtonList,
        PxIconButton,
        PxIcon,
        PxSvg,
        PxSwiper,
        PxSwiperSlide,
        PxPopupButton,
        PxDropdown,
        PxTextbox,
        PxCalendar,
        PxClock,
        PxDatePicker,
        PxCard,
        PxAspect,
        PxProgressCircle,
        PxValidator,
        PxTable,
        PxFit,
        PxCardGrid,
        PxNineGrid,
    },

    data() {
        return {
            validateOne: null,
            validateTwo: null,
            validateThree: null,
            validation: {},

            iconTrash,

            currentDate: new Date(),
            currentDateNull: null,
            supportsMultiSelect: false,
            currentFruitOrFruits: null,
            currentFruits: ['orange', 'apple'],
            currentFruit: 'orange',
            fruits: [
                {
                    id: 'apple',
                    name: 'Apple',
                    color: 'red',
                    deliciousNess: 7,
                    description:
                        'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.',
                    lastPurchase: new Date('2022-03-01T00:00:00.000Z'),
                },
                {
                    id: 'orange',
                    name: 'Orange',
                    color: 'orange',
                    deliciousNess: 8,
                    description:
                        'Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.',
                    lastPurchase: new Date('2022-02-01T00:00:00.000Z'),
                },
                {
                    id: 'lime',
                    name: 'Lime',
                    color: 'yellowgreen',
                    deliciousNess: 3,
                    description:
                        'Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.',
                    lastPurchase: new Date('2022-01-01T00:00:00.000Z'),
                },
                {
                    id: 'banana',
                    name: 'Banana',
                    color: 'gold',
                    deliciousNess: 7,
                    description: 'Donec id elit non mi porta gravida at eget metus.',
                    lastPurchase: new Date('2021-12-01T00:00:00.000Z'),
                },
                {
                    id: 'grape',
                    name: 'Grape',
                    color: 'purple',
                    deliciousNess: 5,
                    description:
                        'Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.',
                    lastPurchase: new Date('2021-11-01T00:00:00.000Z'),
                },
                {
                    id: 'strawberry',
                    name: 'Strawberry',
                    color: 'pink',
                    deliciousNess: 9,
                    description: 'Donec ullamcorper nulla non metus auctor fringilla.',
                    lastPurchase: new Date('2021-10-01T00:00:00.000Z'),
                },
            ],
            currentText: 'Howdy',
        };
    },
    computed: {
        allValid() {
            return Object.values(this.validation).reduce((acc, val) => {
                return acc && val;
            }, true);
        },
    },
    methods: {
        toggleButtonChange() {},
        onValidChanged(isValid, id) {
            this.validation.id = isValid;
        },
    },
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;

.px-vue-test {
    .fit {
        white-space: nowrap;
        color: black;
    }

    .fit--sm {
        font-size: 12px;
        color: red;
    }

    .fit--md {
        font-size: 18px;
        color: purple;
    }

    .fit--lg {
        font-size: 24px;
        color: blue;
    }

    .swiper-max-width {
        max-width: 800px;
        margin: 0 auto;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .swiper-img {
        width: 100%;
        font-size: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .flex-item {
        background-color: accent();
        width: 80px;
        height: 80px;
        border-radius: 10px;
        &--small {
            width: 50px;
            height: 50px;
        }

        &:nth-child(2) {
            background-color: accent(2);
        }
        &:nth-child(3) {
            background-color: accent(4);
        }
    }
    .flex-test {
        border: 2px dashed gray();
        padding: 2px;
        border-radius: 12px;
    }

    // custom toggle button variant
    .px-toggle-button-list--tags {
        .px-toggle-button-list__button {
            @include button(
                (
                    font-size: fs(xs),
                    background-color: #f6c268,
                    border-radius: 2px,
                    min-height: 2em,
                    min-width: 0,
                    padding: 0 0.5em,
                    checked: (
                        background-color: accent(-2),
                        color: white,
                    ),
                )
            );
        }
    }
}
</style>
