import Avatar from '@design-system/Avatar';
import CardContainer from '@design-system/CardContainer';
import Pills from '@design-system/Pills';
import Switcher from '@design-system/Switcher';
import Title from '@design-system/Title';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import { composeSx } from '@utils/components';

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

const AvatarSwitcherCard = ({
  checked = false,
  disabled = false,
  sx,
  title,
  description,
  icon,
  onChange,
  pills,
  actions,
  slotProps = {},
}: AvatarSwitcherCardProps) => {
  const {
    root: rootProps,
    avatar: avatarProps,
    title: titleProps,
    switcher: switcherProps,
  } = slotProps;

  const {
    sx: switcherSx,
    disabled: switcherDisabled,
    ...restSwitcherProps
  } = switcherProps ?? {};

  return (
    <CardContainer
      sx={{
        width: '100%',
        ...sx,
      }}
      {...rootProps}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <Stack
          sx={{
            flex: 1,
            gap: 1,
            alignItems: 'center',
            flexDirection: 'row',
            minWidth: 0,
          }}
        >
          <Avatar
            Icon={icon}
            {...avatarProps}
            disabled={disabled || avatarProps?.disabled}
          />
          <Title
            title={title}
            description={description}
            variant="S"
            sx={{
              textWrap: 'balance',
            }}
            {...titleProps}
          />
        </Stack>
        <Stack
          sx={{
            alignItems: 'center',
            flexDirection: 'row',
            flexShrink: 0,
            gap: 1,
          }}
        >
          {pills?.map((pill, index) => (
            <Pills
              key={`${pill.label}-${index}`}
              hasIcon={false}
              {...pill}
              size="small"
            />
          ))}
          {actions?.map((action, index) => (
            <IconButton
              key={
                ('id' in action ? action.id : undefined) ??
                action['aria-label'] ??
                index
              }
              {...action}
              disabled={disabled || action.disabled}
            />
          ))}
          <Switcher
            value={checked}
            onChange={onChange}
            {...restSwitcherProps}
            sx={composeSx({ alignSelf: 'center', width: 'auto' }, switcherSx)}
            disabled={disabled || switcherDisabled}
          />
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export type {
  AvatarSwitcherCardProps,
  AvatarSwitcherCardSlotProps,
} from './types';

export default AvatarSwitcherCard;