import React, { FC, useState } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { layoutStyles } from 'styles';
import Carousel from 'react-native-snap-carousel';
import { pages } from './pages';
import { CarouselPagination, BigButton } from 'components/core';
import { useForm } from 'hooks';
import { dietReportCommentInitialValues, fieldValidations } from './schema';
import { generateValidationSchema } from 'utils/form';
import { DietReportPage } from './components';
import { mockUserReportResponse } from '__mocks__/userReport';

const DietReportForNutritionist: FC = () => {
  const [activeSlide, setActiveSlide] = useState(0);
  const userReport = mockUserReportResponse;

  const { getTextInputProps, handleSubmit, isSubmitting } = useForm({
    initialValues: dietReportCommentInitialValues,
    validationSchema: generateValidationSchema(fieldValidations),
    onSubmit: async (values) => {
      console.log('masuk');
      console.log(values);
    },
  });

  return (
    <View style={[layoutStyles, styles.reportContainer]}>
      <View style={[styles.flexContainer]}>
        <Carousel
          data={pages.map((page, idx) => (
            <DietReportPage
              key={idx}
              content={page.pageContent(userReport, getTextInputProps)}
              pageName={page.pageName}
              getTextInputProps={getTextInputProps}
            />
          ))}
          renderItem={({ item }: any) => item}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={Dimensions.get('window').width}
          onSnapToItem={setActiveSlide}
          containerCustomStyle={styles.flexContainer}
          slideStyle={styles.flexContainer}
        />
      </View>
      <CarouselPagination index={activeSlide} length={4} />
      <BigButton
        title="Submit Komentar"
        onPress={handleSubmit}
        loading={isSubmitting}
      />
    </View>
  );
};

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;