import { FC } from 'react';
import { useFormContext } from 'react-hook-form';

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

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

export const ActiveFilters: FC = () => {
  const { watch, setValue } = useFormContext();
  const { t } = useLokaliseTranslation('time_off');

  const users = watch('users') || [];

  const onDelete = id => () => {
    setValue(
      'users',
      users.filter(user => user.id !== id),
    );
  };

  return (
    <>
      {!!users.length && (
        <Stack>
          <Typography
            sx={{
              fontWeight: 500,
              fontSize: '14px',
              lineHeight: 1,
              mt: 1.5,
              mb: 1,
            }}
          >
            {t('ACTIVE_FILTERS')}
          </Typography>
          <Stack
            direction="row"
            gap={1}
            flexWrap="wrap"
          >
            {users.map(user => (
              <Chip
                key={user.id}
                label={getFullName(user)}
                onDelete={onDelete(user.id)}
              />
            ))}
          </Stack>
        </Stack>
      )}
    </>
  );
};

export default ActiveFilters;
