<template>
  <div class="be-dev-client">
    <div class="title">DevClient</div>
    <div class="connection-status">
      <template v-if="isConnected">
        <div class="status-dot connected" />
        <div class="status-text">已连接</div>
        <AsyncButton
          title="断开连接"
          @click="disconnect"
        >
          <VIcon icon="mdi-stop" :size="14" />
          断开连接
        </AsyncButton>
      </template>
      <template v-else class="status">
        <div class="status-dot disconnected" />
        <div class="status-text">未连接</div>
        <AsyncButton
          title="重新连接"
          @click="connect"
        >
          <VIcon icon="mdi-play" :size="14" />
          重新连接
        </AsyncButton>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
import { Toast } from '@/core/toast'
import { AsyncButton, VIcon } from '@/ui'
import type { DevClient } from './client'
import { DevClientEvents } from './client'

export default Vue.extend({
  components: {
    AsyncButton,
    VIcon,
  },
  data() {
    return {
      client: null,
      // sessions: [],
      // devRecords: options.devRecords,
      isConnected: false,
    }
  },
  async created() {
    const { devClient } = await import('./client')
    this.client = devClient
    this.updateConnectionStatus()
    devClient.addEventListener(DevClientEvents.ServerChange, this.updateConnectionStatus)
    // devClient.addEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
  },
  beforeDestroy() {
    const devClient = this.client as DevClient
    devClient.removeEventListener(DevClientEvents.ServerChange, this.updateConnectionStatus)
    // devClient.removeEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
  },
  methods: {
    async connect() {
      const result = await this.client.createSocket()
      if (!result) {
        Toast.error('连接失败, 请确保 DevServer 已启动, 并检查连接配置.', 'DevClient', 2000)
      }
    },
    disconnect() {
      this.client.closeSocket()
    },
    updateConnectionStatus() {
      this.isConnected = this.client.isConnected
    },
    updateSessionsStatus() {
      this.sessions = [...this.client.sessions]
    },
  },
})
</script>
<style lang="scss" scoped>
@import "common";

.be-dev-client {
  box-shadow: 0 0 0 1px #8884;
  order: -2;
  border-radius: 4px;
  padding: 6px 6px 6px 10px;
  @include v-stretch(6px);
  body.dark & {
    background-color: #333;
  }
  .title {
    @include semi-bold();
  }
  .connection-status {
    @include h-center(6px);
    font-size: 12px;
    .status-dot {
      height: 8px;
      width: 8px;
      border-radius: 50%;
      &.connected {
        background-color: #81C785;
      }
      &.disconnected {
        background-color: #78909C;
      }
    }
    .be-button {
      margin-left: 4px;
      padding-left: 4px;
      .be-icon {
        margin-right: 4px;
      }
    }
  }
}
</style>
