import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import {
  IconFileText,
  IconListSearch,
  IconUsers,
  IconUsersGroup,
  type TablerIcon,
} from '@tabler/icons-react';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { type SearchFilter } from 'src/pages/dashboard/search/types';

type SidebarProps = {
  category: SearchFilter;
  onSelect: (next: SearchFilter) => void;
};

type CategoryDef = {
  key: SearchFilter;
  labelKey: string;
  Icon: TablerIcon;
};

const SIDEBAR_WIDTH = 280;

const CATEGORIES: CategoryDef[] = [
  { key: 'all', labelKey: 'filters.all', Icon: IconListSearch },
  { key: 'person', labelKey: 'filters.people', Icon: IconUsers },
  { key: 'group', labelKey: 'filters.groups', Icon: IconUsersGroup },
  { key: 'post', labelKey: 'filters.posts', Icon: IconFileText },
];

const Sidebar: FC<SidebarProps> = ({ category, onSelect }) => {
  const { t } = useTranslation('global_search');
  const theme = useTheme();

  return (
    <Stack
      sx={{
        backgroundColor: theme.palette.new.background.layout.tertiary,
        width: SIDEBAR_WIDTH,
      }}
    >
      <Stack
        sx={{
          position: 'sticky',
          p: 2,
          top: 0,
        }}
      >
        <Typography
          variant="globalXS"
          sx={{
            color: theme.palette.new.text.neutral.default,
            px: 1,
            py: 2,
            fontWeight: 'fontWeightSemiBold',
          }}
        >
          {t('detail_page.sidebar_title')}
        </Typography>
        <HuList>
          {CATEGORIES.map(({ key, labelKey, Icon }) => (
            <HuListItem
              key={key}
              selected={category === key}
              onClick={() => onSelect(key)}
              avatar={{ Icon }}
              text={{ title: t(labelKey) }}
              slotProps={{
                container: {
                  sx: {
                    borderRadius: theme.shape.borderRadiusL,
                    mb: 1,
                    py: 1,
                  },
                },
              }}
            />
          ))}
        </HuList>
      </Stack>
    </Stack>
  );
};

export default Sidebar;
