import { TButton } from "@dija/tohama-components";
import { useMessageModal } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const messageModal = useMessageModal();

    const launch = () => {
      void messageModal.show({
        icon: "mdi:check",
        color: "success",
        message: "Thank you, your account was created!",
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

import { TButton, TDivider } from "@dija/tohama-components";
import { useMessageModal } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const messageModal = useMessageModal();

    const launch = async () => {
      const response = await messageModal.show<boolean>({
        color: "alert",
        image: "https://source.unsplash.com/800x800/?man+portrait",
        message: "Are you sure you want logout?",
        actions: ({ controller }) => (
          <>
            <TButton icon="mdi:logout" onClick={() => controller.hide({ value: true })}>
              Logout
            </TButton>
            <TDivider my="xs" />
            <TButton color="secondary" onClick={() => controller.hide()}>
              Cancel
            </TButton>
          </>
        ),
      });

      if (response) {
        // handle logout
      }
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

import { TButton, TDivider } from "@dija/tohama-components";
import { useMessageModal } from "@dija/tohama-plugins";
import { delayPromise, TUsePopupController } from "@dija/tohama-shared";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const messageModal = useMessageModal();

    const loading = ref(false);

    const onDelete = async (controller: TUsePopupController<boolean>) => {
      loading.value = true;
      await delayPromise(1000);
      await controller.hide();
      loading.value = false;
    };

    const onCancel = (controller: TUsePopupController<boolean>) => {
      void controller.hide();
    };

    const launch = async () => {
      void messageModal.show<boolean>({
        color: "danger",
        icon: "mdi:trash-can",
        message: "Are you sure you want to delete your account? This cannot be undone.",
        actions: ({ controller }) => (
          <>
            <TButton icon="mdi:trash-can" loading={loading.value} onClick={() => onDelete(controller)}>
              Delete Account
            </TButton>
            <TDivider my="xs" />
            <TButton color="secondary" onClick={() => onCancel(controller)}>
              Cancel
            </TButton>
          </>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

import { TButton, TDivider, TText } from "@dija/tohama-components";
import { useMessageModal } from "@dija/tohama-plugins";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const messageModal = useMessageModal();

    const launch = () => {
      void messageModal.show({
        icon: "mdi:emoticon-happy-outline",
        color: "success",
        transition: "slide-y-reverse",
        persistent: true,
        message: () => (
          <>
            <TText color="success" size="xl" mb="xs">
              Thank you, John!
            </TText>
            <TText>Your order was created successfully.</TText>
          </>
        ),
        actions: ({ controller }) => (
          <>
            <TButton icon="mdi:star" onClick={() => controller.hide()}>
              Rate Order
            </TButton>
            <TDivider my="xs" />
            <TButton color="secondary" onClick={() => controller.hide()}>
              Hide
            </TButton>
          </>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});