import React, {ReactNode} from 'react';
import {ScrollView, View} from 'react-native';
import {ListRow, useStepper} from '@components';
import {
  FormStep,
  StepData,
  UserReviewed,
} from '@components/DynamicForm/interfaces';
import {Goal} from '@modules/goals/interfaces';
import {useTheme} from '@shared/theme';
import {getCompleteName} from '@shared/utils/generics';

import FormItem from '../../FormItem';
import {FormGoalsList} from '../../FormGoalsList';
import {styles} from './styles';

interface Props {
  StepHeaderComponent: ReactNode;
  StepBodyComponent?: (data: FormStep) => ReactNode;
  FormHeader?: ReactNode;
  disabled?: boolean;
  reviewedUser?: UserReviewed;
}
export function StepContainer({
  StepBodyComponent,
  FormHeader,
  StepHeaderComponent,
  disabled,
  reviewedUser,
}: Props) {
  const {currentIndex, data} = useStepper<StepData[]>();
  const {theme} = useTheme();
  const stepData = data[currentIndex]?.data;
  const stepKey = data[currentIndex]?.key;

  if (!stepData || !stepKey) {
    return null;
  }

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <ScrollView
        contentContainerStyle={[
          styles.scroller,
          !FormHeader && styles.paddingTop,
        ]}
        bounces={false}
        alwaysBounceVertical={false}>
        {!!reviewedUser && (
          <View
            style={[
              styles.reviewedUserContainer,
              {backgroundColor: theme.background.layout.tertiary},
            ]}>
            <ListRow>
              <ListRow.Avatar
                url={reviewedUser.profilePicture}
                name={reviewedUser}
              />
              <ListRow.Title title={getCompleteName(reviewedUser)} />
            </ListRow>
          </View>
        )}
        <View
          style={[
            styles.content,
            {backgroundColor: theme.background.layout.tertiary},
          ]}>
          {Array.isArray(stepData) ? (
            <FormGoalsList
              stepData={stepData as FormStep<Goal>[]}
              StepBodyComponent={StepBodyComponent}
            />
          ) : (
            <FormItem
              reviewId={stepData?.reviewId}
              data={stepData}
              HeaderComponent={StepHeaderComponent}
              BodyComponent={StepBodyComponent}
              disabled={disabled}
            />
          )}
        </View>
      </ScrollView>
    </View>
  );
}
