import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Icon as IconType} from '@tabler/icons-react-native';
import {Alert, Button, Dialog, ListRow, Typography} from '@components';
import {useRespondInvitation} from '@modules/events/hooks/useRespondInvitation';
import {
  EventInvitationStatus,
  EventsAmplitudeSource,
  WorkEvent,
} from '@modules/events/interfaces';
import {getInvitationStatusData} from '@modules/events/utils';
import {useUserId} from '@redux/selectors';
import {useTheme} from '@shared/theme';

import {INVITATION_RESPONSE_OPTIONS} from './constants';
import {styles} from './styles';

interface Props {
  event: WorkEvent;
  source:
    | EventsAmplitudeSource.INVITATIONS_TAB
    | EventsAmplitudeSource.EVENT_DETAIL;
}

function InvitationResponseButton({event, source}: Props) {
  const {id, invitationStatus, remainingSpace, userId} = event;
  const {theme} = useTheme();
  const {t} = useTranslation();
  const currentUserId = useUserId();
  const [showInvitationModal, setShowInvitationModal] = useState(false);
  const {onUpdateInvitationStatus, onCloseNoSpotsDialog, showNoSpotsDialog} =
    useRespondInvitation(event, source);

  const isAssistBlocked = remainingSpace === 0;
  const invitationStatusData = getInvitationStatusData(invitationStatus);

  const onPressInvitation = () => setShowInvitationModal(true);

  const onCloseInvitationModal = () => setShowInvitationModal(false);

  const onChangeInvitationStatus = (newStatus: EventInvitationStatus) => () => {
    if (invitationStatus !== newStatus) {
      onUpdateInvitationStatus.mutate({eventId: id, status: newStatus});
    }
    onCloseInvitationModal();
  };

  const renderOption = ({
    Icon,
    label,
    status,
  }: {
    Icon: IconType;
    label: string;
    status: EventInvitationStatus;
  }) => {
    const isSelected = invitationStatus === status;
    const disabled =
      isAssistBlocked && status === EventInvitationStatus.Accepted;
    const showDisabled = !isSelected && disabled;
    return (
      <ListRow
        disabled={disabled}
        key={status}
        onPress={onChangeInvitationStatus(status)}>
        <ListRow.Avatar
          Icon={Icon}
          iconColor={showDisabled ? theme.text.neutral.disabled : undefined}
          variant={isSelected ? 'primary' : 'default'}
        />
        <ListRow.Title
          title={t(label)}
          disabled={showDisabled}
          variant={isSelected ? 'primaryTitle' : 'default'}
        />
      </ListRow>
    );
  };

  return (
    <>
      <View style={styles.button}>
        <Button
          disabled={userId === currentUserId}
          isLoading={onUpdateInvitationStatus.isLoading}
          IconLeft={invitationStatusData.IconLeft}
          onPress={onPressInvitation}
          text={t(invitationStatusData.label)}
          variant={
            invitationStatus === EventInvitationStatus.Pending
              ? 'primary'
              : 'secondary'
          }
        />
      </View>
      <Dialog
        isVisible={showInvitationModal}
        onClose={onCloseInvitationModal}
        title={t('events.invitation_response')}>
        {isAssistBlocked && <Alert title={t('events.no_remaining_spots')} />}
        <View style={styles.optionsContainer}>
          {INVITATION_RESPONSE_OPTIONS.map(renderOption)}
        </View>
      </Dialog>
      <Dialog
        footer={{
          primaryButton: {
            text: t('events.understood'),
            onPress: onCloseNoSpotsDialog,
          },
        }}
        isVisible={showNoSpotsDialog}
        onClose={onCloseNoSpotsDialog}
        title={t('events.no_remaining_spots')}
        titleNumberOfLines={2}>
        <Typography style={styles.noSpotsText}>
          {t('events.no_remaining_spots_message')}
        </Typography>
      </Dialog>
    </>
  );
}

export default InvitationResponseButton;