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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuSwitcher from '@material-hu/components/design-system/Switcher';

import { NotificationChannelCodes } from '../constants';
import { NotificationChannelConfig } from '../types';

type NotificationChannelsProps = {
  notificationChannelsConfig: NotificationChannelConfig[];
  onChannelToggle: (
    channelCode: NotificationChannelCodes,
    value: boolean,
  ) => void;
};

const NotificationChannels = (props: NotificationChannelsProps) => {
  const { notificationChannelsConfig, onChannelToggle } = props;

  return (
    <Stack sx={{ width: '100%', gap: 2 }}>
      {notificationChannelsConfig.map(channel => (
        <HuCardContainer
          key={channel.id}
          sx={{
            width: '100%',
          }}
        >
          <HuListItem
            disabled={channel.disabled}
            slotProps={{
              avatar: {
                sx: { mr: 1 },
              },
            }}
            sx={{
              '& .MuiListItem-root': { p: 0, m: 0 },
            }}
            avatar={{
              Icon: channel.icon,
              color: channel.disabled ? undefined : 'primary',
            }}
            text={{
              title: channel.title,
              description: channel.description,
            }}
            sideContent={
              <HuSwitcher
                value={channel.isActive}
                disabled={channel.disabled}
                onChange={enabled => onChannelToggle(channel.id, enabled)}
                sx={{ width: 'auto', ml: 'auto' }}
              />
            }
          />
        </HuCardContainer>
      ))}
    </Stack>
  );
};

export default NotificationChannels;