import FontAwesome from '@expo/vector-icons/FontAwesome'
import { BlurView } from 'expo-blur'
import React, { useCallback, useMemo } from 'react'
import { Image, Platform, Pressable, Text, View } from 'react-native'
import { ai, background } from '../assets'
import Page from '../layouts/Page'
import { navigate } from '../navigation/NavigationService'
import { useUserData } from '../providers/UserDataProvider'
import { getCreationStageStates, getStageAction } from '../utils/projectStages'
import { Palette } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'
import palette from '../styles/Palette'

const CREATE_DATA = [
  {
    stageKey: 'songwriter',
    img: ai.nathalie,
    bg: background.writingBG,
    label: 'Nathalie',
    desc: 'Let’s write lyrics together !',
    type: 'Songwriter',
  },
  {
    stageKey: 'beatmaker',
    img: ai.theo,
    bg: background.studioBG,
    label: 'Theo',
    desc: 'Come back, when\nyou’ll have lyrics!',
    type: 'Beatmaker',
  },
  {
    stageKey: 'director',
    img: ai.john,
    bg: background.playbackBG,
    label: 'Theo',
    desc: "Theo t'accompagne pour créer ton playback.",
    type: 'Director',
  },
]

const NewMusicOptions = () => {
  const { selectedProject } = useUserData()
  const stageStates = useMemo(() => getCreationStageStates(selectedProject), [selectedProject])

  const stageStateByKey = useMemo(() => {
    return stageStates.reduce((acc, stage) => {
      acc[stage.key] = stage
      return acc
    }, {})
  }, [stageStates])

  const onPressOption = useCallback(
    (stageKey) => {
      const stageState = stageStateByKey[stageKey]
      if (!stageState || stageState.isLocked) {
        return
      }
      const action = getStageAction(stageKey, selectedProject)
      if (!action?.route) {
        return
      }
      navigate(action.route, action.params)
    },
    [stageStateByKey, selectedProject]
  )

  return (
    <Page
      backgroundImg={background.homeBG}
      headerType="NAVIGATION"
      title={!!selectedProject ? 'Continuer la création' : 'Nouvelle musique'}
      scrollEnabled={true}
    >
      <View style={{ gap: 10 }}>
        {CREATE_DATA.map((item) => {
          const locked = stageStateByKey[item.stageKey]?.isLocked ?? true
          return (
            <Pressable key={item.stageKey} onPress={() => onPressOption(item.stageKey)}>
              <BlurView
                tint="dark"
                intensity={Platform.OS !== 'ios' ? 10 : 20}
                style={{
                  position: 'absolute',
                  zIndex: 1,
                  left: 110,
                  top: 10,
                  paddingVertical: 8,
                  paddingHorizontal: 12,
                  borderRadius: 14,
                  borderBottomLeftRadius: 0,
                  overflow: 'hidden',
                  backgroundColor: Palette.glass,
                }}
                // experimentalBlurMethod={
                //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                // }
              >
                <Text
                  style={{
                    fontSize: 13,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterSemiBold,
                  }}
                >
                  {item.label}, {item.type}
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  {item.desc}
                </Text>
              </BlurView>
              <Image
                source={item.bg}
                style={{
                  width: '100%',
                  height: 152,
                  borderRadius: 20,
                  position: 'absolute',
                  bottom: 0,
                }}
              />
              <Image source={item.img} style={{ width: 130, height: 200 }} resizeMode="contain" />
              {locked && (
                <View
                  pointerEvents="none"
                  style={{
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderRadius: 20,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <View
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: 18,
                      backgroundColor: 'rgba(0,0,0,0.4)',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <FontAwesome name="lock" size={24} color={palette.primary} />
                  </View>
                </View>
              )}
            </Pressable>
          )
        })}
      </View>
    </Page>
  )
}

export default NewMusicOptions