import { useState } from 'react';
import { useQuery } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { IconEdit } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import CircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import Tabs from '@material-hu/components/design-system/Tabs';

import { getRoleSummary } from 'src/services/rolesAndPermissions';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import RoleDetailAssignmentTab from '../components/RoleDetailAssignmentTab';
import RoleDetailPermissionsTab from '../components/RoleDetailPermissionsTab';
import { rolesAndPermissionsKeys } from '../queries';
import { rolesAndPermissionsRoutes } from '../routes';
import { RoleDetailDrawerTab, type RoleListItem, RoleType } from '../types';

type RoleDetailDrawerProps = {
  role?: RoleListItem;
  open: boolean;
  closeDrawer: () => void;
};

const useRoleDetailDrawer = (args: RoleDetailDrawerProps) => {
  const { t } = useLokaliseTranslation('rolesAndPermissions');
  const navigate = useNavigate();

  // TODO: In the future, when there is at least one specific "App" permission assignable to the "ALL_USERS" role, remove this.
  const showSpecificPermissions = args?.role?.type !== RoleType.ALL_USERS;

  const tabs = [
    {
      label: t('role_form.step.assignment'),
      value: RoleDetailDrawerTab.ASSIGNMENT,
    },
    {
      label: t('role_form.permissions.general_permissions'),
      value: RoleDetailDrawerTab.GENERAL_PERMISSIONS,
    },
    ...insertIf(showSpecificPermissions, {
      label: t('role_form.permissions.specific_permissions'),
      value: RoleDetailDrawerTab.SPECIFIC_PERMISSIONS,
    }),
  ];

  const [currentTab, setCurrentTab] = useState<RoleDetailDrawerTab>(
    tabs[0].value,
  );

  const handleClose = () => {
    setCurrentTab(RoleDetailDrawerTab.ASSIGNMENT);
    args.closeDrawer();
  };

  const handleEditRole = () => {
    handleClose();
    navigate(
      `${rolesAndPermissionsRoutes.edit(args.role!.id)}?type=${args.role!.type}`,
    );
  };

  const { data: roleSummary, isLoading } = useQuery({
    queryKey: rolesAndPermissionsKeys.roleSummary(args.role?.id!),
    queryFn: () => getRoleSummary(args.role!.id, args.role!.type),
    enabled: args.open && !!args.role,
    select: r => r.data,
  });

  return {
    title: t('role_details.title', { roleName: args.role?.name }),
    primaryButtonProps: {
      children: t('role_details.edit_role'),
      onClick: handleEditRole,
      startIcon: <IconEdit size={20} />,
    },
    secondaryButtonProps: {
      children: t('general:close'),
      onClick: handleClose,
    },
    onClose: handleClose,
    children:
      isLoading || !roleSummary ? (
        <CircularProgress centered />
      ) : (
        <Stack sx={{ gap: 3, height: '100%' }}>
          <Tabs
            tabs={tabs}
            value={currentTab}
            onTabChange={value => setCurrentTab(value as RoleDetailDrawerTab)}
          />
          {currentTab === RoleDetailDrawerTab.ASSIGNMENT && (
            <RoleDetailAssignmentTab
              assignmentRules={roleSummary?.assignmentRules}
              type={roleSummary?.type}
            />
          )}
          {currentTab === RoleDetailDrawerTab.GENERAL_PERMISSIONS && (
            <RoleDetailPermissionsTab
              roleSummary={roleSummary}
              type={RoleDetailDrawerTab.GENERAL_PERMISSIONS}
            />
          )}
          {currentTab === RoleDetailDrawerTab.SPECIFIC_PERMISSIONS && (
            <RoleDetailPermissionsTab
              roleSummary={roleSummary}
              type={RoleDetailDrawerTab.SPECIFIC_PERMISSIONS}
            />
          )}
        </Stack>
      ),
  };
};

export default () => useDrawerV2(useRoleDetailDrawer);