import React, { FC, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { layoutStyles } from 'styles';
import { pages } from './pages';
import { WizardContainer, Loader, EmptyDataPage, Toast } from 'components/core';
import { useForm, useApi } from 'hooks';
import { dietReportCommentInitialValues, fieldValidations } from './schema';
import { generateValidationSchema } from 'utils/form';
import { DietReportPage } from './components';
import { useRoute, useNavigation } from '@react-navigation/native';
import {
retrieveUserReportByIdApi,
createNutritionistCommentApi,
} from 'services/progress';
import { NutritionistCommentRequest } from 'services/progress/models';
import * as ROUTES from 'constants/routes';
import {
dietReportTextFields,
dietReportSelectFields,
} from 'constants/weeklyReport';
interface ParamsDietReport {
id: number;
}
const DietReportForNutritionist: FC = () => {
const navigation = useNavigation();
const route = useRoute();
const { id } = route.params as ParamsDietReport;
const { isLoading, data: userReports = [] } = useApi(() =>
retrieveUserReportByIdApi(id),
);
const [activeSlide, setActiveSlide] = useState(1);
const {
getTextInputProps,
handleSubmit,
isSubmitting,
isFormUntouched,
isFieldError,
} = useForm({
initialValues: dietReportCommentInitialValues,
validationSchema: generateValidationSchema(fieldValidations),
onSubmit: async (values) => {
const payload: NutritionistCommentRequest = {
weekly_report: userReports[userReports.length - 1].id,
...values,
};
const response = await createNutritionistCommentApi(payload);
if (response.success && response.data) {
Toast.show({
type: 'success',
text1: 'Sukses membuat komen',
text2: 'Komen anda terhadap laporan mingguan klien sudah tersimpan.',
});
navigation.navigate(ROUTES.clientListForNutritionist);
} else {
Toast.show({
type: 'error',
text1: 'Gagal membuat komen',
text2: 'Komen anda terhadap laporan mingguan klien gagal tersimpan.',
});
}
},
});
if (isLoading) {
return ;
}
if (!userReports.length) {
return ;
}
const userReport = userReports[userReports.length - 1];
const isCurrentPageError = (): boolean => {
if (activeSlide === 3) {
return isFieldError('average_consumption');
}
const fields = [
...(dietReportTextFields[`dietReportPage${activeSlide}`] || []),
...(dietReportSelectFields[`dietReportPage${activeSlide}`] || []),
];
return (
isFormUntouched() ||
fields.reduce(
(acc: boolean, item) => acc || isFieldError(item.name),
false,
)
);
};
return (
(
))}
/>
);
};
const styles = StyleSheet.create({
flexContainer: {
flex: 1,
},
reportContainer: {
position: 'relative',
flex: 1,
paddingBottom: 20,
},
searchContainer: {
backgroundColor: 'white',
borderWidth: 1,
borderRadius: 5,
marginBottom: 20,
justifyContent: 'center',
height: 58,
},
backgroundWhite: { backgroundColor: 'white' },
});
export default DietReportForNutritionist;