import Stack from '@material-hu/mui/Stack';

import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import StateCard from '@material-hu/components/design-system/StateCard';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import useUsers from 'src/hooks/queryHooks/useUsers';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { DEFAULT_ASSIGNMENT_RULES } from '../RoleForm/components/RoleSteps/PermissionStep/types';
import useGetAssignmentItems from '../RoleForm/components/RoleSteps/ReviewStep/components/AssignmentSummary/hooks/useGetAssignmentItems';
import {
  type RoleSummary,
  RoleType,
  type SpecificPermissionsTargetRulesResponseType,
} from '../types';

type RoleDetailAssignmentTabProps = {
  assignmentRules?:
    | RoleSummary['assignmentRules']
    | SpecificPermissionsTargetRulesResponseType;
  type?: RoleType;
};

const RoleDetailAssignmentTab = ({
  assignmentRules,
  type,
}: RoleDetailAssignmentTabProps) => {
  const { t } = useLokaliseTranslation('rolesAndPermissions');
  const { assignmentItems } = useGetAssignmentItems(
    assignmentRules ?? DEFAULT_ASSIGNMENT_RULES,
    type,
  );
  const isAllUsersRole = type === RoleType.ALL_USERS;
  const specificPermissionsAllUsers = (
    assignmentRules as SpecificPermissionsTargetRulesResponseType
  )?.allUsers;

  const isAllUsersAssignment = isAllUsersRole || !!specificPermissionsAllUsers;

  const { data: users, isLoading } = useUsers(
    { page: 0, limit: 1 },
    {
      staleTime: Infinity,
      cacheTime: Infinity,
      enabled: isAllUsersAssignment,
    },
  );

  if (isAllUsersAssignment && users) {
    assignmentItems[0].sideText = {
      title: t('general:collaborator_count', { count: users?.count }),
    };
  }

  if (isLoading) {
    return null;
  }

  if (assignmentItems.length === 0) {
    return (
      <StateCard
        title={t('role_form.assignment.active_role_no_members_alert.title')}
        description={t(
          'role_form.assignment.active_role_no_members_alert.description',
        )}
        slotProps={{
          card: {
            sx: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
            },
          },
        }}
      />
    );
  }

  return (
    <Stack
      sx={{
        borderRadius: 2,
        py: 1,
        backgroundColor: theme => theme.palette.new.background.layout.default,
      }}
    >
      {assignmentItems?.map((item, index) => (
        <Tooltip
          title={t('audience__all_users_title')}
          description={t('role_details.all_users_tooltip_description')}
          key={index}
          disableTooltip={!isAllUsersAssignment}
        >
          <div>
            <ListItem
              divider={index !== assignmentItems.length - 1}
              slotProps={{
                container: {
                  sx: {
                    p: 3,
                    pb: 2,
                    pt: index === 0 ? 3 : 2,
                    gap: 3,
                  },
                },
              }}
              {...item}
            />
          </div>
        </Tooltip>
      ))}
    </Stack>
  );
};

export default RoleDetailAssignmentTab;