import Accordion, {
  type AccordionProps,
} from '@material-hu/components/design-system/Accordion';
import List from '@material-hu/components/design-system/List';
import ListItem, {
  type ListItemProps,
} from '@material-hu/components/design-system/List/components/ListItem';

type PermissionsListProps = {
  items: {
    title: string;
    avatar: AccordionProps['avatar'];
    subItems: ListItemProps[];
  }[];
};
const PermissionsList = ({ items }: PermissionsListProps) => (
  <>
    {items?.map((item, index) => (
      <Accordion
        key={index}
        title={item.title}
        disableGutters
        avatar={{
          ...item.avatar,
          withBadge: true,
          badgeProps: {
            color: 'primary',
            variant: 'standard',
            ...item.avatar?.badgeProps,
          },
        }}
        customDetail={
          <List
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.layout.default,
            }}
          >
            {item.subItems.map((subItem, subIndex) => {
              return (
                <ListItem
                  key={subIndex}
                  {...subItem}
                  sx={{
                    pb: 1.5,
                    '& .MuiListItem-root': {
                      backgroundColor: theme =>
                        theme.palette.new.background.layout.tertiary,
                      borderRadius: 1,
                    },
                  }}
                />
              );
            })}
          </List>
        }
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          mb: index === items.length - 1 ? 2 : 1.5,
          boxShadow: 'none',
        }}
      />
    ))}
  </>
);

export default PermissionsList;