import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog, Pill, Pressable, Typography} from '@components';
import {
  ServiceManagementTask,
  ServiceManagementTaskStateTransition,
  ServiceManagementTaskSubtask,
} from '@modules/serviceManagement/interfaces';
import {
  getStateVariant,
  getTranslatedStateName,
} from '@modules/serviceManagement/utils';

import {styles} from './styles';

interface StateTransitionDialogProps {
  isVisible: boolean;
  onClose: () => void;
  stateTransitions: ServiceManagementTaskStateTransition[];
  task: ServiceManagementTask | ServiceManagementTaskSubtask;
  onChangeState: (state: ServiceManagementTaskStateTransition) => void;
}

export function StateTransitionDialog({
  isVisible,
  onClose,
  stateTransitions,
  task,
  onChangeState,
}: StateTransitionDialogProps) {
  const {t} = useTranslation();

  return (
    <Dialog
      title={t('service_management.define_state')}
      onClose={onClose}
      isVisible={isVisible}
      withCloseButton={false}>
      <View style={styles.stateContainer}>
        {stateTransitions.map(state => (
          <Pressable
            key={state.stateId}
            onPress={() => onChangeState(state)}
            style={styles.stateOption}>
            <Typography>
              {t('service_management.change_task_state', {
                state: '→',
              })}
            </Typography>
            <View style={styles.statePillWrapper}>
              <Pill
                text={getTranslatedStateName(state.stateName)}
                variant={getStateVariant(task.type, state.stateName)}
              />
            </View>
          </Pressable>
        ))}
      </View>
    </Dialog>
  );
}