import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Checkbox, RadioButton, SelectionCard, Typography} from '@components';
import {
  Option,
  QuestionSubtype,
  QuestionType,
} from '@modules/peopleExperience/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  options: Option[];
  value?: Nullable<number>;
  onChangeValue: (value?: Nullable<number>) => void;
  disabled?: boolean;
  questionId: string;
  subType: Nullable<QuestionSubtype>;
  type: QuestionType;
}

function Input({
  questionId,
  options,
  value,
  onChangeValue,
  disabled,
  subType,
  type,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const shouldRenderRadio =
    type === QuestionType.RATING || type === QuestionType.MULTIPLE_CHOICE;

  return (
    <View style={styles.container}>
      {options.map((item, index) => (
        <SelectionCard
          isSelected={index === value}
          key={`${questionId}-${item.id}`}
          style={styles.selectionContainer}
          onPress={() => onChangeValue(index)}
          disabled={disabled}>
          <View style={styles.horizontalContainer}>
            {shouldRenderRadio ? (
              <RadioButton
                title={item.label}
                style={styles.checkbox}
                checked={index === value}
                onPress={() => onChangeValue(index)}
                disabled={disabled}
              />
            ) : (
              <Checkbox
                style={styles.checkbox}
                title={item.label}
                checked={index === value}
                onPress={() => onChangeValue(index)}
                disabled={disabled}
              />
            )}
            <Typography variant="xs" color={theme.text.neutral.lighter}>
              {item.subLabel}
            </Typography>
          </View>
        </SelectionCard>
      ))}
      {subType === QuestionSubtype.NPS && (
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {t('people_experience.e_nps_description')}
        </Typography>
      )}
    </View>
  );
}

export default Input;