import type {FunctionComponent} from 'react'
import {useLayoutEffect, useState} from 'react'
import {ScrollView, useWindowDimensions, View} from 'react-native'
import {useNavigation} from 'expo-router'
import {Button, ButtonIcon} from '@/components/ui/button'
import {CameraIcon} from 'lucide-react-native'

const Index: FunctionComponent = () => {
  const navigation = useNavigation()
  const [showCamera, setShowCamera] = useState<boolean>(false)
  const dimension = useWindowDimensions()
  // Drie foto's naast elkaar, met een gap van 8px padding tussen de foto's en een marge langs de randen van 8px.
  const width = Math.ceil(dimension.width / 3 - 4 * 8)

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: ({tintColor}: {tintColor: string}) => (
        <Button size="lg" className="rounded-full p-3.5" variant="link" onPress={() => setShowCamera(true)}>
          <ButtonIcon as={CameraIcon} color={tintColor} size="xl" />
        </Button>
      ),
    })
  }, [navigation])

  return (
    <>
      <ScrollView>
        <View className="m-4 gap-2 flex justify-between flex-row flex-wrap"></View>
      </ScrollView>
    </>
  )
}

export default Index
