import {useCallback} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Switch} from '@components';
import {useModalHandler} from '@hooks/useModalHandler';
import {User} from '@interfaces/user';
import UsersMenu from '@modules/timeOff/components/UsersMenu';
import {useGetOnlineUsersByDateRange} from '@modules/timeOff/hooks';
import {TimeOffTab} from '@modules/timeOff/interfaces';
import {getDate} from '@shared/utils';

import EmptyState from './components/EmptyState';
import SelectedState from './components/SelectedState';
import {styles} from './styles';

interface Props {
  containerStyle: StyleProp<ViewStyle>;
  isEnabled: boolean;
  selectedUser: Nullable<User>;
  startDate: Nullable<Date>;
  endDate: Nullable<Date>;
  showSelectUserError: boolean;
  onToggleEnabled: (value: boolean) => void;
  onSelectUser: (user: Nullable<User>) => void;
}

function SubstituteApproverSwitch({
  containerStyle,
  isEnabled,
  selectedUser,
  startDate,
  endDate,
  showSelectUserError,
  onToggleEnabled,
  onSelectUser,
}: Props) {
  const {t} = useTranslation();
  const {
    isVisible: isUsersMenuVisible,
    onOpenModal,
    onCloseModal,
  } = useModalHandler();
  const {data, getNextPage, isFetchingNextPage, isLoading, onFilterText} =
    useGetOnlineUsersByDateRange(startDate, endDate);

  const showSubstituteMessage = !!selectedUser && !!startDate && !!endDate;

  const onCloseUsersMenu = useCallback(() => {
    onCloseModal();
    onFilterText('');
  }, [onCloseModal, onFilterText]);

  const onSelectUsers = useCallback(
    (users: User[]) => {
      onSelectUser(users[0] || null);
      onCloseUsersMenu();
    },
    [onCloseUsersMenu, onSelectUser],
  );

  const onResetSelection = useCallback(() => {
    onSelectUser(null);
    onCloseUsersMenu();
  }, [onCloseUsersMenu, onSelectUser]);

  const onToggleSwitch = useCallback(
    (value: boolean) => {
      onToggleEnabled(value);
      if (!value) {
        onSelectUser(null);
      }
    },
    [onSelectUser, onToggleEnabled],
  );

  return (
    <>
      <View style={containerStyle}>
        <Switch
          value={isEnabled}
          disabled={!isEnabled}
          onToggle={onToggleSwitch}
          titleStyle={styles.title}
          title={t('time_off.substitute_approver.assign')}
          description={t('time_off.substitute_approver.assign_description')}
        />
        {isEnabled && (
          <>
            {!selectedUser ? (
              <EmptyState
                onPress={onOpenModal}
                buttonStyle={styles.button}
                showError={showSelectUserError}
                messageStyle={styles.messageText}
                buttonLabel={t('time_off.substitute_approver.select')}
                errorMessage={t('time_off.substitute_approver.required')}
              />
            ) : (
              <SelectedState
                onPress={onOpenModal}
                selectedUser={selectedUser}
                subtitle={
                  selectedUser?.nickname ||
                  selectedUser?.employeeInternalId ||
                  ''
                }
                infoMessage={t('time_off.substitute_approver.assigned', {
                  startDate: startDate ? getDate(startDate) : '',
                  endDate: endDate ? getDate(endDate) : '',
                })}
                showInfoMessage={showSubstituteMessage}
                cardStyle={styles.selectedUserContainer}
                messageStyle={styles.messageText}
              />
            )}
          </>
        )}
      </View>
      <UsersMenu
        data={data}
        singleSelection
        isLoading={isLoading}
        onEndReached={getNextPage}
        onFilterText={onFilterText}
        fromTab={TimeOffTab.REQUESTS}
        onSelectUsers={onSelectUsers}
        isVisible={isUsersMenuVisible}
        onResetSelection={onResetSelection}
        onCloseWithoutApply={onCloseUsersMenu}
        isFetchingNextPage={isFetchingNextPage}
        title={t('time_off.substitute_approver.select')}
        selectedUsers={selectedUser ? [selectedUser] : []}
        searchPlaceholder={t('time_off.search_collaborator')}
      />
    </>
  );
}

export default SubstituteApproverSwitch;