import { AppNavHookType } from '@navigation/navigators'
import { useNavigation } from '@react-navigation/native'

/**
 * AnimatedBox, Box, Text, TextInput
 * These UI components are extensions of styled-components + custom styles
 * e.g
 * export const Box = styled.View<BoxProps>``
 * export const Text = styled.Text<TextProps>``
 * export const AnimatedBox = Reanimated.createAnimatedComponent(Box)
 * 
 */

import { AnimatedBox, Box, Text, TextInput } from '@ui'
import { BlurView } from 'expo-blur'
import { useCallback, useEffect, useState } from 'react'
import { Keyboard, ScrollView, TouchableOpacity } from 'react-native'
import Animated, {
  LinearTransition,
  useAnimatedKeyboard,
  useAnimatedProps,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withSpring,
  withTiming
} from 'react-native-reanimated'

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)

export const LinearModal = () => {
  const [value, setValue] = useState('')

  const navigation = useNavigation<AppNavHookType>()

  const keyboard = useAnimatedKeyboard()

  const blurIntensity = useSharedValue(0)
  const blurOpacity = useSharedValue(0)
  const blurScale = useSharedValue(0.8)

  const animatedModalKeyboardStyles = useAnimatedStyle(() => {
    return {
      height: withSpring(keyboard.height.value, {
        duration: 250
      })
    }
  })

  const animatedBlurProps = useAnimatedProps(() => {
    return {
      intensity: blurIntensity.value
    }
  })

  const animatedModalContainerStyle = useAnimatedStyle(() => {
    return {
      opacity: blurOpacity.value,
      transform: [
        {
          scale: blurScale.value
        }
      ]
    }
  })

  useEffect(() => {
    blurIntensity.value = withTiming(93, {
      duration: 300
    })

    blurOpacity.value = withDelay(100, withTiming(1))
    blurScale.value = withDelay(100, withTiming(1, { duration: 320 }))
  }, [blurOpacity, blurIntensity, blurScale])

  const closeModal = useCallback(() => {
    Keyboard.dismiss()

    blurIntensity.value = withDelay(
      100,
      withTiming(0, {
        duration: 300
      })
    )

    blurOpacity.value = withTiming(0, {
      duration: 150
    })
    blurScale.value = withTiming(0.6)

    setTimeout(() => {
      navigation.goBack()
    }, 300)
  }, [blurIntensity, blurOpacity, blurScale, navigation])

  return (
    <AnimatedBlurView
      animatedProps={animatedBlurProps}
      tint={'systemUltraThinMaterialDark'}
      experimentalBlurMethod={'dimezisBlurView'}
      style={[{ flex: 1 }]}>
      <AnimatedBox
        layout={LinearTransition}
        pt={'xxxl'}
        pb={'xl'}
        flex={1}
        bgColor={'transparent'}>
        <AnimatedBox
          layout={LinearTransition}
          bgColor={'transparent'}
          px={'md'}>
          <AnimatedBox
            borderRadius={12}
            style={[animatedModalContainerStyle, { height: '100%' }]}
            bgColor={'white'}
            pt={'md'}
            overflow={'hidden'}>
            <Box
              px={'md'}
              flexDirection={'row'}
              alignItems={'center'}
              justifyContent={'space-between'}>
              <Text type={'semiBold16'} color={'tertiary'}>
                Assignee
              </Text>
              <TouchableOpacity
                onPress={() => {
                  closeModal()
                }}>
                <Text type={'medium14'} color={'tertiary'}>
                  Close
                </Text>
              </TouchableOpacity>
            </Box>
            <TextInput
              value={value}
              onChangeText={v => setValue(v)}
              placeholder={'Search...'}
              showClear
              mt={'md'}
              px={'md'}
              autoFocus
            />
            <ScrollView>
              {Array.from({ length: 50 }).map((_, i) => (
                <Box bgColor={'transparent'} key={i} mt={'md'} px={'md'}>
                  <Text type={'medium14'}>{`Item ${i + 1}`}</Text>
                </Box>
              ))}
            </ScrollView>
          </AnimatedBox>
        </AnimatedBox>
      </AnimatedBox>
      <AnimatedBox
        style={animatedModalKeyboardStyles}
        bgColor={'transparent'}
        width={'100%'}
      />
    </AnimatedBlurView>
  )
}