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: "John",
    desc: "Come back when your\naudio is ready!",
    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;