<template>
    <hy-main class="app">
        <h1>HyperModals</h1>

        <hy-select v-model="theme">
            <option value="match">Match</option>
            <option value="contrast">Contrast</option>
            <option value="white">White</option>
            <option value="black">Black</option>
        </hy-select>

        <br />
        <br />

        <hy-flex-container>
            <hy-button @click="notification()">Create Notification</hy-button>

            <hy-select v-model="notificationData.destination">
                <option value="top-left">Top-Left</option>
                <option value="top-right">Top-Right</option>
                <option value="bottom-left">Bottom-Left</option>
                <option value="bottom-right">Bottom-Right</option>
            </hy-select>
        </hy-flex-container>

        <br />
        <br />

        <hy-button @click="alert()">Create Alert</hy-button>

        <br />
        <br />

        <hy-button @click="confirm()">Create Confirm</hy-button>

        <br />
        <br />

        <hy-button @click="snackbar()">Create Snackbar</hy-button>

        <br />
        <br />

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam vero velit a rem expedita mollitia nihil quis quae nemo sed. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus deleniti sed consequuntur eius soluta, vero inventore et facere distinctio fuga. Ipsa id ea quas iure magni, rerum minus voluptas, quasi hic itaque magnam error facilis facere accusantium, sit molestiae veniam! Omnis fugit veritatis error, quaerat distinctio perferendis ratione excepturi eveniet laborum? Quam temporibus repellat, inventore sit nam, similique dolorum maiores magni architecto nisi, atque minima sint cupiditate saepe suscipit dolor tempore! Rerum aspernatur assumenda, praesentium nam, molestias nisi illum hic eius mollitia porro soluta. Optio rem qui veritatis voluptatem, tempora quo laborum provident reprehenderit natus pariatur obcaecati sed fugiat, aliquam expedita iusto? Amet sapiente ullam accusamus. Dolores voluptatum optio reprehenderit corporis quisquam expedita pariatur totam, praesentium commodi magnam ex distinctio non maxime sed officia dolorem aspernatur modi labore voluptatibus, recusandae eaque ea alias sequi! Molestias veniam accusantium deserunt eveniet! Totam saepe inventore pariatur temporibus quasi repellendus perferendis mollitia, necessitatibus recusandae ex, sit quaerat magnam numquam officia nam dolorem animi? Hic deserunt consectetur nihil ducimus non magni vel, deleniti minus voluptatibus dolores nulla eos, illum dicta aspernatur cupiditate earum aut fugit beatae maiores! Sit architecto optio odit excepturi aspernatur impedit, tempora voluptatem quo iusto earum placeat cum aperiam nulla eius ipsam praesentium iure, beatae, repudiandae aut. Impedit facilis praesentium nisi ipsum voluptatibus eaque enim voluptate quis adipisci ab consectetur numquam expedita sed beatae inventore temporibus nesciunt eum soluta repellendus nihil qui ad, cumque ipsam! Odio quas perspiciatis hic voluptatem tenetur consequatur veritatis doloremque maiores eius iusto? Pariatur cumque, distinctio excepturi et eaque labore eligendi tempore nihil consequatur, odio voluptatum laborum qui totam deleniti recusandae architecto accusamus molestias eum neque quia eius quidem ad accusantium exercitationem. Explicabo, quis repellat iusto quibusdam aliquam velit voluptatum totam corrupti, quaerat quod neque. Placeat sed accusamus excepturi laborum officia vitae et officiis, magni est, a nobis dolorem cupiditate repellendus fugiat alias unde veritatis nulla, nihil itaque doloremque voluptatum beatae veniam! Exercitationem odio harum odit qui deleniti aliquam vel nostrum hic fuga, rem, cumque quam ratione nam quaerat necessitatibus sapiente, debitis accusamus porro commodi repudiandae temporibus. Sed dignissimos quae reiciendis quia porro minima, placeat magni fuga aperiam praesentium iure perferendis aliquid. Praesentium voluptas ad perferendis quos temporibus nemo, distinctio vel delectus facere necessitatibus in, quam, quibusdam laboriosam aspernatur odit quaerat autem aliquam. Eum quos eveniet laborum repellat cumque vitae exercitationem atque culpa voluptas eos ab illo eaque, distinctio sequi suscipit dolorem deleniti fugit debitis praesentium adipisci. Eaque eligendi neque nesciunt praesentium vero, delectus nobis nulla esse nostrum! Placeat unde similique repellat fugit cum voluptates delectus excepturi ex molestias animi numquam recusandae aliquam quasi facere, adipisci voluptate facilis odio temporibus dolores quas asperiores veniam! Autem distinctio aliquam numquam reiciendis, fugit, culpa et facilis error recusandae minima dolores quae voluptatibus expedita itaque repudiandae eveniet veritatis maiores. Inventore, temporibus. Fugiat labore fuga beatae nihil autem facere et odit aliquam, inventore fugit distinctio ad voluptatem nam nesciunt corporis similique itaque earum qui optio unde vel eos quibusdam eum. Ratione ad ipsum obcaecati quae tempore, commodi possimus provident, ullam fugiat, quod earum!
    </hy-main>
</template>

<script>
import hm from "../lib/index.js";

export default {
    name: "App",
    data() {
        return {
            hm,
            notificationData: {
                destination: "top-right",
            },
            theme: "match",
        };
    },
    methods: {
        async notification() {
            try {
                let result = await hm.notification(
                    // this.generateId(5),
                    this.generateTextOfRandomLength(5, 20),
                    [
                        {
                            text: "Okay",
                            handler(resolve, close) {
                                alert("User clicked okay");
                                resolve("hello world notification");
                            },
                        },
                    ],
                    {
                        // duration: 5 * 1000,
                        autoClose: false,
                        throw: true,
                        description: "This is a description",
                        destination: this.notificationData.destination,
                        /* icon: {
                            html: "<i class='icon-bell'></i>",
                            style: "secondary",
                        }, */
                        theme: this.theme,
                        icon: {
                            html: this.getRandomElementFromArray(["<i class='icon-sparkles'></i>", "<i class='icon-bolt'></i>", "<i class='icon-caution-diamond'></i>", "<i class='icon-bell'></i>", null]),
                            style: this.getRandomElementFromArray(["secondary", "blue", "pink", "yellow", "green", "red", "purple"]),
                        },
                    }
                );

                console.log("Notification: ", result);
            } catch (error) {
                console.log("Notification: threw at closing", error);
            }
        },
        async alert() {
            try {
                let result = await hm.alert(
                    this.generateId(5),
                    // this.generateTextOfRandomLength(5, 20),
                    [
                        {
                            text: "Blue",
                            style: "blue",
                            handler(resolve, close) {
                                resolve("clicked on 'Blue'");
                            },
                        },
                        {
                            text: "Pink",
                            style: "pink",
                            handler(resolve, close) {
                                resolve("clicked on 'Pink'");
                            },
                        },
                        {
                            text: "Yellow",
                            style: "yellow",
                            handler(resolve, close) {
                                resolve("clicked on 'Yellow'");
                            },
                        },
                        {
                            text: "Green",
                            style: "green",
                            handler(resolve, close) {
                                resolve("clicked on 'Green'");
                            },
                        },
                        {
                            text: "Red",
                            style: "red",
                            handler(resolve, close) {
                                resolve("clicked on 'Red'");
                            },
                        },
                        {
                            text: "Purple",
                            style: "purple",
                            handler(resolve, close) {
                                resolve("clicked on 'Purple'");
                            },
                        },
                    ],
                    {
                        // throw: true,
                        // direction: "vertical",
                        description: "This is a description",
                        // doBSL: true,
                        // dismissDescription: "Custom dismiss",
                        // dismissStyle: "green"
                        theme: this.theme,
                        icon: {
                            html: this.getRandomElementFromArray(["<i class='icon-sparkles'></i>", "<i class='icon-bolt'></i>", "<i class='icon-caution-diamond'></i>", "<i class='icon-bell'></i>", null]),
                            style: this.getRandomElementFromArray(["secondary", "blue", "pink", "yellow", "green", "red", "purple"]),
                        },
                        /* icon: {
                            html: "<i class='icon-sparkles'></i>",
                            style: this.getRandomElementFromArray(["secondary", "blue", "pink", "yellow", "green", "red", "purple"]),
                        }, */
                    }
                );

                console.log("Alert: ", result);
            } catch (error) {
                console.log("Alert: threw at closing", error);
            }
        },
        async confirm() {
            let result = await hm.confirm("Do you want to delete this?", null, {
                description: "This is irreversible",
                direction: "vertical",
                // doBSL: false,
                icon: {
                    html: this.getRandomElementFromArray(["<i class='icon-sparkles'></i>", "<i class='icon-bolt'></i>", "<i class='icon-caution-diamond'></i>", "<i class='icon-bell'></i>", null]),
                    style: this.getRandomElementFromArray(["secondary", "blue", "pink", "yellow", "green", "red", "purple"]),
                },
            });

            console.log("Confirm: ", result);
        },
        async snackbar() {
            try {
                let result = await hm.snackbar(
                    // this.generateId(20),
                    this.generateTextOfRandomLength(5, 20),
                    [
                        {
                            text: "Okay",
                            handler(resolve, close) {
                                alert("User clicked okay");
                                resolve("hello world snackbar");
                            },
                        },
                    ],
                    {
                        // duration: 4 * 1000,
                        autoClose: false,
                        // throw: true,
                        // description: "This is a description",
                        description: this.getRandomElementFromArray(["This is a description", null]),
                        theme: this.theme,
                        icon: {
                            html: this.getRandomElementFromArray(["<i class='icon-sparkles'></i>", "<i class='icon-bolt'></i>", "<i class='icon-caution-diamond'></i>", "<i class='icon-bell'></i>", null]),
                            style: this.getRandomElementFromArray(["secondary", "blue", "pink", "yellow", "green", "red", "purple"]),
                        },
                    }
                );

                console.log("Snackbar: ", result);
            } catch (error) {
                console.log("Snackbar: threw at closing", error);
            }
        },
        generateId(length) {
            let keys = "QWERTZUIOPASDFGHJKLYXCVBNM".split("");
            let id = "";

            for (let i = 0; i < length; i++) {
                let key = Math.floor(Math.random() * keys.length);
                id += keys[key];
            }

            return id;
        },
        generateTextOfRandomLength(min, max) {
            let length = Math.floor(Math.random() * (max - min) + min);
            let id = "";

            for (let i = 0; i < length; i++) {
                id += "hello ";
            }

            return id;
        },
        getRandomElementFromArray(array) {
            return array[Math.floor(Math.random() * array.length)];
        },
    },
};
</script>

<style lang="scss" scoped>
#app {
}
</style>
