import { ROUTE_MANAGER_USERS } from '@/constants/routes';
import { apiQueryUserById } from '@/services/master/UserController';
import { PageContainer } from '@ant-design/pro-components';
import { history, useParams } from '@umijs/max';
import { useEffect, useState } from 'react';
import AssignGroup from './components/AssignGroup';
import ShareThing from './components/ShareThing';

enum AssignTabsKey {
  group = 'group',
  device = 'device',
}

const AssignUserPage = () => {
  const { userId } = useParams<{ userId: string }>();
  const [userProfile, setUserProfile] =
    useState<MasterModel.ProfileResponse | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [tabSelected, setTabSelected] = useState<AssignTabsKey>(
    AssignTabsKey.group,
  );
  useEffect(() => {
    const fetchUserProfile = async () => {
      try {
        setLoading(true);
        const profile = await apiQueryUserById(userId || '');
        setUserProfile(profile);
      } catch (error) {
        console.error('Failed to fetch user profile:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchUserProfile();
  }, [userId]);
  return (
    <PageContainer
      title={userProfile?.email}
      header={{
        onBack: () => history.push(ROUTE_MANAGER_USERS),
      }}
      loading={loading}
      tabList={[
        {
          tab: 'Phân quyền đơn vị',
          key: AssignTabsKey.group,
        },
        {
          tab: 'Chia sẻ thiết bị',
          key: AssignTabsKey.device,
        },
      ]}
      onTabChange={(key) => {
        setTabSelected(key as AssignTabsKey);
      }}
    >
      {tabSelected === AssignTabsKey.group && (
        <AssignGroup user={userProfile} />
      )}
      {tabSelected === AssignTabsKey.device && (
        <ShareThing user={userProfile} />
      )}
    </PageContainer>
  );
};

export default AssignUserPage;