import { type FC } from 'react';

import { IconUsersGroup } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import Button, {
  type ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

import { type SegmentationMapValues } from 'src/types/segmentation';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useSegmentationDrawer } from './useSegmentationDrawer';

export type SegmentateProps = Omit<ButtonProps, 'onChange'> & {
  selectedItems: Map<number, SegmentationMapValues[]>;
  onChange?: (items: Map<number, SegmentationMapValues[]>) => void;
  amountOfUsersReach: number;
  showSegmentate: boolean;
};

const Segmentate: FC<SegmentateProps> = props => {
  const { selectedItems, onChange, amountOfUsersReach, showSegmentate } = props;

  const { t } = useLokaliseTranslation('post');

  const { drawer, showDrawer } = useSegmentationDrawer({
    selectedItems,
    onSubmit: onChange,
  });

  if (!showSegmentate) return null;

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          ...(showSegmentate && {
            px: 0,
            '&:hover': {
              backgroundColor: 'transparent',
            },
          }),
        }}
        {...(showSegmentate && {
          component: Button,
          variant: 'text',
          onClick: () => showDrawer({}),
        })}
      >
        <IconUsersGroup />
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          color={showSegmentate ? 'inherit' : 'none'}
          sx={{
            whiteSpace: 'nowrap',
          }}
        >
          {t('post:reach_amount', {
            usersAmount: amountOfUsersReach,
          })}
        </Typography>
      </Box>
      {drawer}
    </>
  );
};

export default Segmentate;