import { type FC } from 'react';

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

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

import { type Task } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Activities from './Activities';

type RequestTabProps = {
  taskData: Task;
};

const ActivitiesTab: FC<RequestTabProps> = ({ taskData }) => {
  const { t } = useLokaliseTranslation('service_management');
  return (
    <Stack
      sx={{
        height: '100%',
        width: '100%',
        overflow: 'auto',
        p: 3,
        gap: 2,
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          {t('request_activities')}
        </Typography>
        {/* TODO: When all types are added, implement Filter by type */}
        {/*  <Stack sx={{ flexDirection: 'row', gap: 1 }}>
          <HuChips
            label={t('all')}
            isSelected={true}
          />
          <HuChips
            label={t('requests')}
            isSelected={false}
          />
          <HuChips
            label={t('approvals.title')}
            isSelected={false}
          />
          <HuChips
            label={t('tasks')}
            isSelected={false}
          />
        </Stack> */}
      </Stack>
      <HuCardContainer
        sx={{
          width: '100%',
          height: 'auto',
          overflow: 'auto',
          scrollbarWidth: 'thin',
          scrollbarColor: 'rgba(0, 0, 0, 0.2) transparent',
        }}
        padding={0}
      >
        <Activities
          taskData={taskData}
          isAgentSide
        />
      </HuCardContainer>
    </Stack>
  );
};

export default ActivitiesTab;
