import {
  View,
  Text,
  Image,
  ScrollView,
  Pressable,
  Platform,
} from "react-native";
import React from "react";
import Page from "../layouts/Page";
import { ai, background, img } from "../assets";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { navigate } from "../navigation/NavigationService";
import { Routes } from "../navigation";

const CREATE_DATA = [
  {
    img: ai.nathalie,
    bg: background.writingBG,
    label: "Nathalie",
    desc: "Let’s write lyrics together !",
    type: "Songwriter",
  },
  {
    img: ai.theo,
    bg: background.studioBG,
    label: "Theo",
    desc: "Come back, when\nyou’ll have lyrics!",
    type: "Beatmaker",
  },
  {
    img: ai.bena,
    bg: background.productionBG,
    label: "Bena",
    desc: "Come back when you want\nto publish the song!",
    type: "Producer",
  },
  {
    img: ai.john,
    bg: background.playbackBG,
    label: "John",
    desc: "Come back when your\naudio is ready!",
    type: "Director",
  },
];

const Home = () => {
  return (
    <Page backgroundImg={background.homeBG} headerType="NONE">
      <View style={{ flex: 1 }}>
        <Image
          source={img.goodVibe}
          style={{ alignSelf: "center", position: "absolute" }}
        />
        <ScrollView
          contentContainerStyle={{
            flexGrow: 1,
            gap: 57,
            paddingBottom: responsiveHeight(20),
          }}
          showsVerticalScrollIndicator={false}
        >
          <View style={{ height: responsiveHeight(60) }} />
          {CREATE_DATA.map((item, index) => (
            <Pressable
              key={index}
              onPress={() =>
                navigate(Routes.Create, {
                  action: item.type,
                })
              }
            >
              <BlurView
                tint="dark"
                intensity={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"
              />
            </Pressable>
          ))}
        </ScrollView>
      </View>
    </Page>
  );
};

export default Home;
