import React, { useCallback, useMemo, useRef } from 'react';
import { StatusBar } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import PaperOnboarding, {
  PaperOnboardingItemType,
} from '@gorhom/paper-onboarding';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import CustomView from '../../components/CustomView';
import CustomButton from '../../components/CustomButton';

const data: PaperOnboardingItemType[] = [
  {
    content: CustomView,
    backgroundColor: '#000',
  },
  {
    content: CustomView,
    backgroundColor: '#666',
    showCloseButton: true,
  },
  {
    content: CustomView,
    backgroundColor: '#000',
  },
  {
    content: CustomView,
    backgroundColor: '#666',
  },
];

const CustomContentScreen = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // refs
  const goBackRef = useRef<any>(null);
  goBackRef.current = goBack;

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnIndexChange = useCallback(_index => {
    console.log(`Index changed: ${_index}`);
  }, []);
  const handleOnClosePress = useCallback(() => goBackRef.current(), []);

  // renders
  const renderCloseButton = useCallback(
    () => <CustomButton text={'X'} onPress={handleOnClosePress} />,
    [handleOnClosePress]
  );
  return (
    <>
      <StatusBar barStyle="light-content" />
      <PaperOnboarding
        onIndexChange={handleOnIndexChange}
        data={data}
        indicatorSize={24}
        indicatorBackgroundColor="#333"
        indicatorBorderColor="#333"
        safeInsets={insets}
        closeButton={renderCloseButton}
      />
    </>
  );
};

export default CustomContentScreen;