import React from 'react';
import { Image, TouchableOpacity, View } from 'react-native';
import { Label } from '@widergy/mobile-ui';
import Colors from '../Colors';
import styles from './styles';

interface Props {
  sourceImage?: any;
  title: string;
  description?: string;
  children?: any;
  buttons?: Array<object>;
  withOpacity?: boolean;
  descriptionStyle?: object;
}

const GeneralStep = ({
  sourceImage,
  title,
  description,
  children,
  buttons,
  withOpacity = false,
  descriptionStyle,
}: Props) => {
  const renderButton = (action, i) => (
    <TouchableOpacity
      style={[
        styles.buttonRender,
        i === 0 && styles.borderButtonRender,
        buttons?.length === 1 ? styles.sizeOneButtonRender : styles.sizeTwoButton,
      ]}
      disabled={action?.disabled}
      onPress={action.onPress}
      key={action.key}
    >
      <Label
        big
        bold
        color={action?.disabled ? Colors.gray02 : action.secondary ? Colors.dark01 : Colors.primary05}
      >
        {action.title}
      </Label>
    </TouchableOpacity>
  );
  return (
    <View style={[styles.container, withOpacity && styles.withOpacity]}>
      <View style={styles.containerText}>
        <Label semiBold color={Colors.dark01} style={styles.title}>
          {title}
        </Label>
        <Label big color={Colors.gray02} style={[styles.description, descriptionStyle && descriptionStyle]}>
          {description}
        </Label>
      </View>
      {sourceImage && <Image source={sourceImage} style={styles.image} />}
      {children}
      <View style={styles.buttonsContainer}>{buttons?.map(renderButton)}</View>
    </View>
  );
};
export default GeneralStep;