// src/main.ts
import App from './App.vue';
import { createApp } from 'vue';
import { createPahoMqttPlugin } from 'vue-paho-mqtt';

createApp(App)
  .use(
    createPahoMqttPlugin({
      PluginOptions: {
        autoConnect: true,
        showNotifications: true,
      },

      MqttOptions: {
        host: 'localhost',
        port: 9001,
        clientId: `MyID-${Math.random() * 9999}`,
        mainTopic: 'MAIN',
      },
    }),
  )
  .mount('#app');

import { createPahoMqttPlugin } from 'vue-paho-mqtt';
export default defineNuxtPlugin({
  name: 'vue-paho-mqtt',
  enforce: 'pre',
  async setup(nuxtApp) {
    nuxtApp.vueApp.use(
      createPahoMqttPlugin({
        PluginOptions: {
          autoConnect: true,
          showNotifications: true,
        },
        MqttOptions: {
          host: 'localhost',
          port: 9001,
          clientId: `MyID-${Math.random() * 9999}`,
          mainTopic: 'MAIN',
        },
      }),
    );
  },
  hooks: {
    'app:created'() {
      const nuxtApp = useNuxtApp();
    },
  },
});

type MqttMode = 'B' | 'F' | 'Q' | 'Qr' | 'Br' | 'Fnr';

$mqtt.publish('test/topic', 'Hello, world!', 'Fnr');

createPahoMqttPlugin({
      PluginOptions: {
        showNotifications: true,
        ...
      }
      ...

const connect: ({
  onConnect?: ((...args: unknown[]) => unknown) | undefined;
  onFailure?: ((...args: unknown[]) => unknown) | undefined;
  onConnectionLost?:
    | ((
        responseObject: {
          errorCode: number;
        },
        ...args: unknown[]
      ) => unknown)
    | undefined;
  onMessageArrived?:
    | ((
        message: {
          payloadString: string;
          destinationName: string;
        },
        ...args: unknown[]
      ) => unknown)
    | undefined;
}) => Promise<boolean>;

// Composition API
import { $mqtt } from 'vue-paho-mqtt';
$mqtt.connect();

// Options API
this.$mqtt.connect();

// or use it with async/await
const result = await $mqtt.connect();
// result will return "true" if the connection was successful

$mqtt.connect({
  onConnect: () => {
    console.log('Mqtt connected');
  },
  onFailure: () => {
    console.log('Mqtt connection failed');
  },
  onConnectionLost: (error: any) => {
    console.log('Error:', error.message);
  },
  onMessageArrived: (message: {
    payloadString: string;
    destinationName: string;
  }) => {
    console.log(
      'Message Arrived:',
      message.payloadString,
      message.destinationName,
    );
  },
});

const disconnect: () => Promise<boolean>;

// Composition API
import { $mqtt } from 'vue-paho-mqtt';
$mqtt.disconnect();

// Options API
this.$mqtt.disconnect();

// or use it with async/await
const result = await $mqtt.disconnect();
// result will return "true" if the disconnection was successful

const subscribe: (
  topic: string,
  onMessage: (data: string, ...args: unknown[]) => unknown,
  useMainTopic?: boolean,
) => void;

// if the enableMainTopic is true, subscribe to 'MAIN/my/topic'
this.$mqtt.subscribe('my/topic', (data: string) => {
  console.log(data, 'recieved');
});

// even if the enableMainTopic is true, subscribe to 'my/topic'
this.$mqtt.subscribe(
  'my/topic',
  (data: string) => {
    console.log(data, 'recieved');
  },
  false,
);

import { $mqtt } from 'vue-paho-mqtt';

$mqtt.subscribe('my/topic', (data: string) => {
  console.log(data, 'recieved');
});

const publish: (
  topic: string,
  payload: string,
  mode: MqttMode,
  useMainTopic?: boolean,
) => void;

// if the enableMainTopic is true, publish to 'MAIN/my/topic'
// 'Fnr' => Qos: 2 , retained: false
this.$mqtt.publish('test/topic', 'Hello, world!', 'Fnr');

// even if the enableMainTopic is true, publish to 'my/topic'
// 'B' => Qos: 0 , retained: false
this.$mqtt.publish('test/topic', 'Hello, world!', 'B', false);

// if the enableMainTopic is true, publish to 'MAIN/my/topic'
// 'Qr' => Qos: 1 , retained: true
this.$mqtt.publish('test/topic', 'Hello, world!', 'Qr');

// payload: "Hello, world!"

import { $mqtt } from 'vue-paho-mqtt';

$mqtt.publish('test/topic', 'Hello, world!', 'Qr');

const host: (e?: string) => string;

$mqtt.host(); // ie: "localhost"

$mqtt.host('192.168.0.1');

onMounted(() => {
  console.log(this.$mqtt.host());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  console.log($mqtt.host());
});

const port: (e?: number) => number;

$mqtt.port(); // ie: 9001

$mqtt.port(1234);

onMounted(() => {
  console.log(this.$mqtt.port());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';
onMounted(() => {
  console.log($mqtt.port());
});

const path: (e?: string) => string;

$mqtt.path(); // ie: "/mqtt"

$mqtt.path('/ws/mqtt');

onMounted(() => {
  console.log(this.$mqtt.path());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  console.log($mqtt.path());
});

const username: (e?: string) => string;

$mqtt.username(); // ie: ""

$mqtt.username('testUsername');

onMounted(() => {
  console.log(this.$mqtt.username());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  console.log($mqtt.username());
});

const password: (e?: string) => string;

$mqtt.password(); // ie: ""

$mqtt.password('secret');

onMounted(() => {
  console.log(this.$mqtt.password());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  console.log($mqtt.password());
});

const clientId: (e?: string) => string;

$mqtt.clientId(); // ie: "MyID-234"

$mqtt.clientId('MyNewClientId');

onMounted(() => {
  console.log(this.$mqtt.clientId());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  console.log($mqtt.clientId());
});

const mainTopic: (e?: string) => string | undefined;

$mqtt.mainTopic(); // ie: "MyID-234"

$mqtt.mainTopic('MyNewClientId');

onMounted(() => {
  console.log(this.$mqtt.mainTopic());
});

import { onMounted } from 'vue';
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  console.log($mqtt.mainTopic());
});

const unsubscribe: (topic: string, useMainTopic?: boolean) => void;

// if the enableMainTopic is true, unsubscribe from 'MAIN/my/topic'
$mqtt.unsubscribe('test/topic');

// even if the enableMainTopic is true, unsubscribe from 'my/topic'
$mqtt.unsubscribe('test/topic', false);

const unsubscribeAll: () => void;

$mqtt.unsubscribeAll();

type MqttStatus =
  | 'connected'
  | 'disconnected'
  | 'connecting'
  | 'error'
  | 'lost'
  | null;

const status: () => MqttStatus;

$mqtt.status(); // ie: "connected"

onMounted(() => {
  console.log($mqtt.status());
});

mounted() {
  // Connect to the mqtt broker
  this.$mqtt.connect();

  // Subscribe to a topic
  this.$mqtt.subscribe("test/topic", (message: string) => {
    console.log("Received message:",  message);
  });

  // Publish a message
  this.$mqtt.publish("test/topic",  "Hello, world!",  "F");

  // Disconnect from the broker
  this.$mqtt.disconnect();
}

<script setup lang="ts">

import { onMounted }  from  "vue";
import { $mqtt } from 'vue-paho-mqtt';

onMounted(() => {
  // Connect to the mqtt broker
  $mqtt.connect();

  // Subscribe to a topic
  $mqtt.subscribe("test/topic", (message: string) => {
    console.log("Received message:",  message);
  });

  // Publish a message
  $mqtt.publish("test/topic",  "Hello, world!",  "F");

   // Disconnect from the broker
  $mqtt.disconnect();
});

</script>