import { useTranslation } from 'react-i18next';

import { IconButton, Stack, Typography, useTheme } from '@mui/material';

import Tooltip from '../../../../design-system/Tooltip';
import AnimatedArrowIcon from '../AnimatedArrowIcon';

import { type SubSidebarCollapsibleHeaderProps } from './types';

const SubSidebarCollapsibleHeader = ({
  isControlled,
  onCollapse,
  collapsed,
  setInternalCollapsed,
}: SubSidebarCollapsibleHeaderProps) => {
  const { palette } = useTheme();
  const { t } = useTranslation('material_hu_only');

  const handleCollapse = () => {
    if (isControlled) onCollapse?.();
    else setInternalCollapsed(!collapsed);
  };

  return (
    <Stack
      onClick={handleCollapse}
      sx={{
        flexDirection: 'row',
        p: 2,
        cursor: 'pointer',
        alignItems: 'center',
        backgroundColor: palette.new.background.layout.brand,
      }}
    >
      <Tooltip
        disableTooltip={!collapsed}
        direction="right"
        title={t('sub_sidebar.expand_content')}
      >
        <IconButton
          sx={{
            py: 0.5,
            '&:hover': { backgroundColor: 'transparent' },
          }}
        >
          <AnimatedArrowIcon isCollapsed={collapsed} />
        </IconButton>
      </Tooltip>
      {!collapsed && (
        <Typography
          variant="globalS"
          fontWeight="semiBold"
          sx={{ color: palette.new.text.neutral.brand }}
        >
          {t('sub_sidebar.collapse')}
        </Typography>
      )}
    </Stack>
  );
};

export default SubSidebarCollapsibleHeader;
