import Layout from 'components/Layout';
import LoadingScreen from 'components/LoadingScreen';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { RefreshControl, ScrollView } from 'react-native';
import ProfileHeader from './ProfileHeader';
import ProfilePages from './ProfilePages';

const Profile = () => {
  const [refreshing, setRefreshing] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadInitialData = async () => {
      try {
        await new Promise(resolve => setTimeout(resolve, 100));
        setLoading(false);
      } catch (error) {
        console.error('Home loading error:', error);
        setLoading(false);
      }
    };

    loadInitialData();
  }, []);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setLoading(true);
    setTimeout(() => {
      setRefreshing(false);
      setLoading(false);
    }, 100);
  }, []);

  const refreshControl = useMemo(
    () => <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
    [refreshing, onRefresh],
  );

  const contentContainerStyle = useMemo(() => ({ paddingBottom: 10 }), []);

  if (loading) {
    return (
      <Layout>
        <LoadingScreen />
      </Layout>
    );
  }

  return (
    <Layout>
      <ScrollView
        keyboardShouldPersistTaps="handled"
        refreshControl={refreshControl}
        contentContainerStyle={contentContainerStyle}
      >
        <ProfileHeader />
        <ProfilePages />
      </ScrollView>
    </Layout>
  );
};

export default Profile;
