import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import Dropdown from '@design-system/Dropdown';
import List from '@design-system/List';
import ListItem from '@design-system/List/components/ListItem';
import Skeleton from '@design-system/Skeleton';

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

const HeaderExtraActions = ({
  actions = [],
  loading,
  closeDropdownOnClick,
  label,
}: HeaderExtraActionsProps) => {
  const { t } = useTranslation('material_hu_only');
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  if (loading) {
    return (
      <Skeleton
        width={105}
        height={40}
      />
    );
  }
  if (actions.length === 0) return null;

  return (
    <Dropdown
      label={label ?? t('hu_header.more_actions')}
      position="right"
      buttonProps={{ size: 'small' }}
      onOpen={() => setIsDropdownOpen(true)}
      onClose={() => setIsDropdownOpen(false)}
      open={isDropdownOpen}
    >
      <List>
        {actions.map(item => (
          <ListItem
            key={item.key}
            onClick={
              closeDropdownOnClick
                ? () => {
                    setIsDropdownOpen(false);
                    item.onClick?.();
                  }
                : item.onClick
            }
            text={{
              title: item.title,
              description: item.description,
            }}
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              cursor: 'pointer',
            }}
            avatar={item.avatar}
          />
        ))}
      </List>
    </Dropdown>
  );
};

export default HeaderExtraActions;
