<template>
    <div class="f-confirm-modal">
        <button type="button" class="button button--secondary" @click="onClick">Öppna Modal</button>
        <pre v-if="result"> Resultat: {{ result }} </pre>
        <div>
            <f-confirm-modal
                :is-open="isOpen"
                :buttons="buttons"
                @confirm="confirm"
                @dismiss="dismiss"
                @close="close"
            >
                <template #heading> Träutensilierna </template>
                <template #content>
                    Träutensilierna i ett tryckeri äro ingalunda en oviktig faktor, för trevnadens,
                    ordningens och ekonomiens upprätthållande, och dock är det icke sällan som
                    sorgliga erfarenheter göras på grund af det oförstånd med hvilket kaster,
                    formbräden och regaler tillverkas och försäljas Kaster som äro dåligt hopkomna
                    och af otillräckligt.
                </template>
            </f-confirm-modal>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FConfirmModal } from "@fkui/vue";

export default defineComponent({
    name: "FConfirmModalExample",
    components: { FConfirmModal },
    inheritAttrs: true,
    data() {
        return {
            action: "",
            result: "",
            isOpen: false,
            buttons: [
                { label: "Ja, gör detta", event: "confirm", type: "primary" },
                { label: "Nej, gör inte detta", event: "dismiss", type: "secondary" },
            ],
        };
    },
    methods: {
        onClick() {
            this.isOpen = true;
            this.result = "";
        },
        confirm() {
            this.result = "bekräftade";
            this.isOpen = false;
        },
        dismiss() {
            this.result = "avböjde";
            this.isOpen = false;
        },
        close(reason) {
            this.action = reason;
            this.isOpen = false;
        },
    },
});
</script>

<template>
    <div class="f-confirm-modal">
        <button type="button" class="button button--secondary" @click="onClick">Ta bort</button>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { confirmModal } from "@fkui/vue";

export default defineComponent({
    name: "FConfirmModalExample",
    data() {
        return {
            frukt: {
                namn: "Mango",
            },
        };
    },
    methods: {
        confirmRemove(frukt) {
            return confirmModal(this, {
                heading: "Ta bort frukt",
                content: `Är du säker att du vill ta bort "${frukt.namn}"?`,
                confirm: "Ja, ta bort",
                dismiss: "Nej, behåll",
            });
        },
        async onClick() {
            if (await this.confirmRemove(this.frukt)) {
                alert("Bekräftade");
            }
        },
    },
});
</script>

<template>
    <div class="f-confirm-modal">
        <button type="button" class="button button--secondary" @click="onClick">Tre knappar</button>
        <pre> Modalen stängdes med resultatet: {{ action }} </pre>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { type ModalResult, openModal, FConfirmModal } from "@fkui/vue";

export default defineComponent({
    name: "FConfirmModalExample",
    data() {
        return {
            action: undefined as ModalResult<void> | undefined,
            isOpen: false,
            threeButtons: [
                {
                    label: "Ja, ta bort",
                    type: "primary",
                    screenreader: "telefonnumret",
                    event: "confirm",
                },
                { label: "Nej, uppdatera telefonnumret", event: "update" },
                { label: "Nej, ta inte bort", screenreader: "telefonnumret", event: "dismiss" },
            ],
        };
    },
    methods: {
        async onClick() {
            this.action = await openModal(this, FConfirmModal, {
                props: {
                    heading: "Ta bort telefonnummer",
                    content: "Vill du ta bort ditt telefonnummer?",
                    buttons: this.threeButtons,
                    size: "large",
                },
            });
        },
    },
});
</script>