import React, { useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router';
import { SafeArea, TabBar } from 'antd-mobile';

import icon_1_s from './assets/tabIcon/icon_tab1_s.svg';
import icon_1_u from './assets/tabIcon/icon_tab1_u.svg';
import icon_2_s from './assets/tabIcon/icon_tab2_s.svg';
import icon_2_u from './assets/tabIcon/icon_tab2_u.svg';
import icon_3_s from './assets/tabIcon/icon_tab3_s.svg';
import icon_3_u from './assets/tabIcon/icon_tab3_u.svg';
import icon_4_s from './assets/tabIcon/icon_tab4_s.svg';
import icon_4_u from './assets/tabIcon/icon_tab4_u.svg';
import { appWebview, bridgeOb, emitBridgeEvent, registerBridgeFunc } from './utils/bridge';
import { useAppDispatch, useAppSelector } from './utils/hooks';
import { addNewPoint, updateTaskState } from './store/features/measureSlice';
import { updateBleList, updateDevice, updateSyncProgress } from './store/features/contextSlice';
import { createWebSocket, sharedWsUrl } from './services/socket';
import { fetchRailTypes } from './store/features/baseData';

const BottomBar = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { pathname } = location;
  const setRouteActive = (value: string) => {
    navigate(value, { replace: true });
  };

  const tabs = [
    {
      key: '/home/measure',
      title: '测量',
      icon_s: icon_1_s,
      icon_n: icon_1_u,
    },
    // {
    //   key: '/home/setting',
    //   title: '设置',
    //   icon_s: icon_2_s,
    //   icon_n: icon_2_u,
    // },
    {
      key: '/home/bluetooth',
      title: '蓝牙',
      icon_s: icon_3_s,
      icon_n: icon_3_u,
    },
    {
      key: '/home/mine',
      title: '我的',
      icon_s: icon_4_s,
      icon_n: icon_4_u,
    },
  ];

  return (
    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
      {tabs.map((item) => (
        <TabBar.Item
          key={item.key}
          icon={(active: boolean) =>
            active ? <img src={item.icon_s} alt="icon" /> : <img src={item.icon_n} alt="icon" />
          }
          title={item.title}
        />
      ))}
    </TabBar>
  );
};

function App() {
  const dispatch = useAppDispatch();
  const baseState = useAppSelector((state) => state.baseData);
  if (baseState.railTypes.length === 0) {
    dispatch(fetchRailTypes());
  }

  useEffect(() => {
    const subscription = bridgeOb.subscribe((datagram) => {
      if (datagram.type === 'measure-event') {
        dispatch(updateTaskState(datagram.data));
      } else if (datagram.type === 'measure-point') {
        dispatch(addNewPoint(datagram.data));
      } else if (datagram.type === 'peripheral-status') {
        dispatch(updateDevice(datagram.data));
      } else if (datagram.type === 'ble-list') {
        dispatch(updateBleList(datagram.data));
      } else if (datagram.type === 'sync-progress') {
        dispatch(updateSyncProgress(datagram.data));
      }
    });
    return () => subscription.unsubscribe();
  }, [dispatch]);

  useEffect(() => {
    // registerBridgeFunc();
    if (appWebview) {
      registerBridgeFunc();
    } else {
      //连接websocket
      const wsClient = createWebSocket(sharedWsUrl);
      const subscription = wsClient.dataOb.subscribe((data) => {
        emitBridgeEvent(data);
      });
      wsClient.connect();
      return () => subscription.unsubscribe();
    }
  }, []);

  return (
    <div className="App">
      <SafeArea position="top" />
      <div>
        <Outlet />
      </div>
      <div className="border-t border-[#ebebeb]">
        <BottomBar />
      </div>
      <SafeArea position="bottom" />
    </div>
  );
}

export default App;