import { View, Text, StyleSheet, ScrollView } from "react-native";
import React, { useMemo, useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
import SongStructureDragDrop from "../../components/SongStructureDragDrop";

// baseStructure: array like ['couplet','refrain',...]
// onChange: callback that receives array like ['couplet','refrain',...]
const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
  const [containerLayout, setContainerLayout] = useState(null);

  const sourceItems = useMemo(() => {
    // create unique ids for duplicates
    const counters = { couplet: 0, refrain: 0 };
    return (baseStructure || []).map((type) => {
      const key = (type || '').toLowerCase();
      counters[key] = (counters[key] || 0) + 1;
      const idx = counters[key];
      return {
        id: `${key}-${idx}`,
        label: `${type} ${idx}`,
        value: key,
      };
    });
  }, [baseStructure]);

  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader
        title="Personnalise la structure de ta chanson"
        subTitle="Intègre en Drag and drop"
      />
      {/* <View style={{ flex: 1, gap: 10 }}>
        <View
          style={{ flex: 1 }}
          onLayout={(e) => {
            setContainerLayout(e.nativeEvent.layout);
          }}
        >
          <ItemContainer height={containerLayout?.height}>
            <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
              {["Couplet", "Refrain", "Couplet", "Refrain"].map(
                (item, index) => (
                  <View key={index} style={styles.dropzoneContainer}>
                    <Text style={styles.dropzone}>{item}</Text>
                  </View>
                )
              )}
            </ScrollView>
          </ItemContainer>
        </View>
        <View style={{ flex: 1 }}>
          <ItemContainer height={containerLayout?.height}>
            <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
              {CUSTOM_SONG_STRUCTURE.map((item, index) => (
                <View key={index} style={styles.itemContainer}>
                  <BlurView
                    intensity={30}
                    style={{
                      flex: 1,
                      backgroundColor: Palette.glass,
                      justifyContent: "center",
                      paddingHorizontal: 12,
                    }}
                  >
                    <Text style={styles.dropzone}>{item}</Text>
                  </BlurView>
                </View>
              ))}
            </ScrollView>
          </ItemContainer>
        </View>
      </View> */}
      <View style={{ flex: 1 }}>
        <SongStructureDragDrop
          sourceItems={sourceItems}
          onChange={(arr) => onChange?.(arr)}
        />
      </View>
    </View>
  );
};

export default CustomizeSongStructure;

const styles = StyleSheet.create({
  dropzoneContainer: {
    paddingVertical: 14,
    paddingHorizontal: 12,
    backgroundColor: "#00000080",
    borderRadius: 14,
  },
  dropzone: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  itemContainer: {
    height: 54,
    backgroundColor: Palette.glass,
    borderRadius: 14,
    overflow: "hidden",
    shadowColor: "#00000040",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});
