import React, {useState} from 'react';
import {IconProps} from '@tabler/icons-react-native';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import {ListItem, Toggle} from '@components';
import {Channel} from '@modules/notificationsCenter/interfaces';
import {updateNotificationChannel} from '@modules/notificationsCenter/services';
import {NOTIFICATIONS_QUERY_KEYS} from '@modules/notificationsCenter/constants';

interface Props {
  id: Channel;
  title: string;
  description: string;
  Icon: React.FC<IconProps>;
  value: boolean;
  moduleCode: string;
}

function NotificationChannelItem({
  id,
  title,
  description,
  Icon,
  value,
  moduleCode,
}: Props) {
  const [toggleValue, setToggleValue] = useState(value);
  const queryClient = useQueryClient();

  const {mutate, isPending} = useMutation({
    mutationFn: updateNotificationChannel,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: NOTIFICATIONS_QUERY_KEYS.notificationApps,
      });
    },
    onError: () => {
      setToggleValue(toggleValue);
    },
  });

  const onTogglePress = () => {
    if (!isPending) {
      setToggleValue(!toggleValue);
      mutate({moduleCode, channelCode: id, enabled: !toggleValue});
    }
  };

  return (
    <ListItem
      title={title}
      description={description}
      presentation="card"
      isFirstItem
      isLastItem
      avatar={{Icon, variant: 'primary'}}
      descriptionNumberOfLines={2}>
      <Toggle value={toggleValue} onToggle={onTogglePress} />
    </ListItem>
  );
}

export default NotificationChannelItem;