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

import StateCard from '@material-hu/components/design-system/StateCard';
import Title from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import useGetPermissionItems from '../hooks/useGetPermissionItems';
import {
  RoleDetailDrawerTab,
  type RoleSummary,
  type SpecificPermissionsTargetRulesResponseType,
} from '../types';

import PermissionsList from './PermissionsList';
import RoleDetailAssignmentTab from './RoleDetailAssignmentTab';

type RoleDetailPermissionsTabProps = {
  roleSummary: RoleSummary;
  assigmentRules?: RoleSummary['assignmentRules'];
  type: RoleDetailDrawerTab;
};

const RoleDetailPermissionsTab = ({
  roleSummary,
  type,
}: RoleDetailPermissionsTabProps) => {
  const { t } = useLokaliseTranslation('rolesAndPermissions');
  const { generalPermissionsItems, specificPermissionsItems } =
    useGetPermissionItems(roleSummary);

  const items =
    type === RoleDetailDrawerTab.GENERAL_PERMISSIONS
      ? generalPermissionsItems
      : specificPermissionsItems;

  return (
    <Stack sx={{ flex: 1 }}>
      <Stack
        sx={{
          justifyContent:
            type === RoleDetailDrawerTab.SPECIFIC_PERMISSIONS
              ? 'space-between'
              : 'flex-start',
          flex: 1,
        }}
      >
        <PermissionsList items={items} />
        {type === RoleDetailDrawerTab.SPECIFIC_PERMISSIONS &&
          items.length > 0 && (
            <Stack sx={{ gap: 1, pt: 2 }}>
              <Divider />
              <Title
                variant="S"
                fontWeight="fontWeightSemiBold"
                title={t(`role_details.permissions_list.${type}.footer.title`)}
              />
              <RoleDetailAssignmentTab
                assignmentRules={
                  roleSummary.specificPermissionsTargetRules as
                    | SpecificPermissionsTargetRulesResponseType
                    | undefined
                }
                type={roleSummary.type}
              />
            </Stack>
          )}
      </Stack>
      {items.length === 0 && (
        <StateCard
          title={t(`role_details.permissions_list.${type}.state_card.title`)}
          description={t(
            `role_details.permissions_list.${type}.state_card.description`,
          )}
          slotProps={{
            card: {
              sx: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                height: '100%',
              },
            },
          }}
        />
      )}
    </Stack>
  );
};

export default RoleDetailPermissionsTab;