import TooltipIconFontButton from '@/components/shared/TooltipIconFontButton';
import { ROUTER_HOME } from '@/constants/routes';
import { apiQueryMessage } from '@/services/master/MessageController';
import { apiGetThingDetail } from '@/services/master/ThingController';
import { PageContainer } from '@ant-design/pro-components';
import { history, useModel, useParams } from '@umijs/max';
import { useEffect, useState } from 'react';
import ThingTitle from './components/ThingTitle';

const DetailDevicePage = () => {
  const { thingId } = useParams();
  const [thing, setThing] = useState<MasterModel.Thing | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const { initialState } = useModel('@@initialState');
  const getThingDetail = async () => {
    setIsLoading(true);
    try {
      const thing = await apiGetThingDetail(thingId || '');
      setThing(thing);
    } catch (error) {
      console.error('Error when get Thing: ', error);
    } finally {
      setIsLoading(false);
    }
  };
  const getDeviceConfig = async () => {
    try {
      const resp = await apiQueryMessage(
        thing?.metadata?.data_channel_id || '',
        initialState?.currentUserProfile?.metadata?.frontend_thing_key || '',
        {
          offset: 0,
          limit: 1,
          subtopic: `config.${thing?.metadata?.type}.node`,
        },
      );
      console.log('Device Config:', resp.messages![0].string_value_parsed);
    } catch (error) {}
  };
  useEffect(() => {
    if (thingId) {
      getThingDetail();
    }
  }, [thingId]);
  useEffect(() => {
    if (thing) {
      getDeviceConfig();
    }
  }, [thing]);

  return (
    <PageContainer
      title={isLoading ? 'Loading...' : <ThingTitle thing={thing} />}
      header={{
        onBack: () => history.push(ROUTER_HOME),
        breadcrumb: undefined,
      }}
      extra={[
        <TooltipIconFontButton
          key="logs"
          tooltip="Nhật ký"
          iconFontName="icon-system-diary"
          shape="circle"
          size="middle"
          onClick={() => {}}
        />,
        <TooltipIconFontButton
          key="notifications"
          tooltip="Thông báo"
          iconFontName="icon-bell"
          shape="circle"
          size="middle"
          onClick={() => {}}
        />,
        <TooltipIconFontButton
          key="settings"
          tooltip="Cài đặt"
          iconFontName="icon-setting-device"
          shape="circle"
          size="middle"
          onClick={() => {}}
        />,
      ]}
    >
      Thing ID: {thingId}
    </PageContainer>
  );
};

export default DetailDevicePage;