import React, {useCallback} from 'react';
import {ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog} from '@components/_HuGo/Dialog';
import {List, ListItem} from '@components/_HuGo/List';

import {Step} from '../../interfaces';
import {styles} from './styles';

interface Props {
  isVisible: boolean;
  setIsVisible: (isVisible: boolean) => void;
  steps: Step[];
  onStepSelect: (index: number) => void;
}

export function NavigationModal({
  isVisible,
  setIsVisible,
  steps,
  onStepSelect,
}: Props) {
  const {t} = useTranslation();

  const onClose = useCallback(() => setIsVisible(false), [setIsVisible]);

  const onPressItem = useCallback(
    (index: number) => () => {
      onStepSelect(index);
      onClose();
    },
    [onClose, onStepSelect],
  );

  const renderItem: ListRenderItem<Step> = ({item, index}) => (
    <ListItem
      {...item}
      title={item.id}
      onItemPress={onPressItem(index)}
      withRightIcon
    />
  );

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onClose}
      title={t('general.steps_tasks')}>
      <List
        data={steps}
        withDivider
        renderItem={renderItem}
        style={styles.withoutPadding}
      />
    </Dialog>
  );
}
