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

import { IconArrowUpRight } from '@material-hu/icons/tabler';
import Button from '@material-hu/mui/Button';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAlert from '@material-hu/components/design-system/Alert';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuPills from '@material-hu/components/design-system/Pills';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useRequiredParams from 'src/hooks/useRequiredParams';
import { roleTypeConfig } from 'src/pages/dashboard/RolesAndPermissions/constants';
import { rolesAndPermissionsKeys } from 'src/pages/dashboard/RolesAndPermissions/queries';
import { rolesAndPermissionsRoutes } from 'src/pages/dashboard/RolesAndPermissions/routes';
import { RoleType } from 'src/pages/dashboard/RolesAndPermissions/types';
import { getRolesByUser } from 'src/services/rolesAndPermissions';
import { useLokaliseTranslation } from 'src/utils/i18n';

import RolesByUserSkeleton from './components/RolesByUserSkeleton';

const ROLE_ITEM_HEIGHT = 72;

const RolesTab = () => {
  const { t } = useLokaliseTranslation([
    'rolesAndPermissions',
    'backoffice_only',
  ]);
  const { id: userId } = useRequiredParams(['id']);
  const HuGoThemeProvider = useHuGoTheme();

  const { data: rolesByUser, isLoading } = useQuery(
    rolesAndPermissionsKeys.rolesByUser(userId),
    () => getRolesByUser(userId),
    {
      select: response => response.data,
    },
  );

  return (
    <Container
      maxWidth="md"
      sx={{ py: 3 }}
    >
      <Stack sx={{ gap: 2 }}>
        <HuGoThemeProvider>
          <HuTitle
            variant="L"
            title={t('backoffice_only:dashboard_sidebar.roles_and_permissions')}
          />
        </HuGoThemeProvider>
        <HuAlert
          severity="info"
          title={t('users.alert.role_updated_title')}
          description={t('users.alert.role_updated_description')}
        />
        <HuCardContainer
          fullWidth
          sx={{ flexDirection: 'row' }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              width: '100%',
            }}
          >
            <HuTitle
              title={t('users.associated_roles')}
              variant="S"
            />
            <Button
              endIcon={<IconArrowUpRight />}
              size="small"
              component={Link}
              to={rolesAndPermissionsRoutes.base()}
            >
              {t('users.go_to_roles_and_permissions')}
            </Button>
          </Stack>
          <Stack
            sx={{
              maxHeight: `calc(5 * ${ROLE_ITEM_HEIGHT}px)`,
              overflowY: 'auto',
            }}
          >
            {isLoading ? (
              <RolesByUserSkeleton />
            ) : (
              <HuList>
                {rolesByUser?.map((role, index) => {
                  return (
                    <HuListItem
                      key={role.id}
                      text={{
                        title: (
                          <Stack
                            sx={{
                              flexDirection: 'row',
                              alignItems: 'center',
                              gap: 1,
                            }}
                          >
                            <Typography
                              variant="globalS"
                              fontWeight="fontWeightSemiBold"
                            >
                              {role.name}
                            </Typography>
                            {role?.type !== RoleType.CUSTOM && (
                              <HuTooltip
                                description={t('type.role_predefined_tooltip', {
                                  role: role.name,
                                })}
                              >
                                <span>
                                  <HuPills
                                    label={t('type.predefined')}
                                    type="neutral"
                                    hasIcon={false}
                                    size="small"
                                  />
                                </span>
                              </HuTooltip>
                            )}
                          </Stack>
                        ),
                        description: role.description,
                      }}
                      avatar={{
                        Icon: roleTypeConfig[role?.type ?? RoleType.CUSTOM]
                          .icon,
                      }}
                      divider={index !== rolesByUser.length - 1}
                    />
                  );
                })}
              </HuList>
            )}
          </Stack>
        </HuCardContainer>
      </Stack>
    </Container>
  );
};

export default RolesTab;