<script lang="ts" setup>
  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
  import { option } from './config';
  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
  import { ref, onMounted, unref } from 'vue';
  import { useIntervalFn } from '@vueuse/core';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { useReceiveValue } from '../../../hook/useReceiveValue';
  import { useDataFetch } from '../../../hook/socket/useSocket';
  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const isOpenClose = ref<boolean>(true);

  const randomFn = () => {
    useIntervalFn(() => {
      isOpenClose.value = !unref(isOpenClose);
    }, 2000);
  };
  const { getNumberValue } = useReceiveValue();
  const updateFn: DataFetchUpdateFn = (message, attribute) => {
    const { data = {} } = message;
    const [latest] = data[attribute] || [];
    const [_, value] = latest;
    isOpenClose.value = Boolean(getNumberValue(value));
  };

  onMounted(() => {
    !props.config.option.uuid && randomFn();
  });

  useDataFetch(props, updateFn);

  const { getScale } = useComponentScale(props);
</script>

<template>
  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
    <DeviceName :config="config" class="text-center" />
    <div
      style="--open-color: `${getDesign.openColor}`; --close-color: `${getDesign.closeColor}`"
      :class="isOpenClose ? 'switch_open' : 'switch_close'"
    >
    </div>
  </main>
</template>
<style lang="less" scoped>
  .switch_open {
    background: var(--open-color);
    box-shadow: var(--open-color) 0 0 10px 3px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 10px 0;
  }

  .switch_close {
    background-color: var(--close-color);
    box-shadow: none;
    width: 42.023px;
    height: 42.023px;
    border-radius: 50%;
    margin: 10px 0;
  }
</style>