import { useState } from 'react';

import {
  IconAward,
  IconFileInfo,
  IconSmartHome,
  IconUsersGroup,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Category from '@material-hu/components/composed-components/Category';
import CardContainer from '@material-hu/components/design-system/CardContainer';

import useCustomServerTranslation from 'src/hooks/useCustomServerTranslation';
import usePermissions from 'src/hooks/usePermissions';
import useKudosTitle from 'src/pages/dashboard/acknowledgements/hooks/useKudosTitle';
import { type UserProfile } from 'src/types/user';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import AcknowledgementsTab from './AcknowledgementsTab';
import FeedTab from './FeedTab';
import GroupsTab from './GroupsTab';
import InformationTab from './InformationTab';

type ProfileContentProps = {
  user: UserProfile;
};
const ProfileContent = ({ user }: ProfileContentProps) => {
  const { hasAll: canViewFeed } = usePermissions([UserPermissions.VIEW_POSTS]);
  const { hasAll: canViewGroups } = usePermissions([
    UserPermissions.VIEW_GROUPS,
  ]);
  const { hasAll: canViewAcknowledgements } = usePermissions([
    UserPermissions.ACCESS_ACKNOWLEDGEMENTS,
  ]);
  const { t } = useLokaliseTranslation('profile');

  const kudosTitle = useKudosTitle();
  const groupsTitle = useCustomServerTranslation({
    module: 'GROUPS',
    defaultTranslationKey: 'groups',
    namespace: 'dashboard_sidebar_app',
  });
  const feedTitle = useCustomServerTranslation({
    module: 'FEED',
    defaultTranslationKey: 'feed',
    namespace: 'dashboard_sidebar_app',
  });
  const options = [
    {
      label: t('information.title'),
      Icon: IconFileInfo,
      Component: InformationTab,
      id: 'information',
    },
    ...insertIf(canViewFeed, {
      label: feedTitle,
      Icon: IconSmartHome,
      Component: FeedTab,
      id: 'feed',
    }),
    ...insertIf(canViewGroups, {
      label: groupsTitle,
      Icon: IconUsersGroup,
      Component: GroupsTab,
      id: 'groups',
    }),
    ...insertIf(canViewAcknowledgements, {
      label: kudosTitle,
      Icon: IconAward,
      Component: AcknowledgementsTab,
      id: 'acknowledgements',
    }),
  ];

  const [selectedId, setSelectedId] = useState(options[0].id);
  const selectedCategory = options.find(o => o.id === selectedId) ?? options[0];

  return (
    <Stack sx={{ flexDirection: 'row', gap: 3, alignItems: 'flex-start' }}>
      <CardContainer sx={{ flex: 0, minWidth: 240 }}>
        <Stack sx={{ gap: 1.5 }}>
          {options.map(option => (
            <Category
              key={option.id}
              label={option.label}
              Icon={option.Icon}
              selected={option.id === selectedCategory.id}
              onClick={() => setSelectedId(option.id)}
            />
          ))}
        </Stack>
      </CardContainer>
      <Stack sx={{ flex: 1, minWidth: 0 }}>
        <selectedCategory.Component user={user} />
      </Stack>
    </Stack>
  );
};

export default ProfileContent;
