import {useEffect, useRef, useState} from "react";

import {
    Animated,
    Button,
    Image,
    Modal,
    PanResponder,
    Platform,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from "react-native";
import {Gesture, GestureDetector, GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler';
// eslint-disable-next-line import/namespace
import MyColorPicker from "@/components/MyColorPicker";
// @ts-ignore
import DragAndDropObject from "@/components/DragAndDropObject";
export default function Index() {

  const [heading="", setHeading] = useState<string>();
  const [paragraph="", setParagraph] = useState<string>();

  const[ selectedColor = "#FFFFFF", setSelectedColor ] = useState<string>();


  const handleButtonPress = (): void => {
    console.log('Input: ', heading);
      console.log('Color', selectedColor);
  }







  return (
      <GestureHandlerRootView style={{ flex: 1 }}>
          <View className="flex-1 justify-center items-center">
              <View className="flex-row items-center">
                  <View className="w-[63%] p-4 rounded-xl mt-8 ml-5 mr-3">
                      <View className="flex-1 justify-center items-center bg-gray-100">
                          <DragAndDropObject
                              heading={heading}
                              paragraph={paragraph}
                              color={selectedColor}
                          />
                      </View>
                  </View>
                  <View className="flex-1 justify-center items-center pt-5">
                      <MyColorPicker onColorSelected={(color: string) => setSelectedColor(color)} />

                  </View>
              </View>
          </View>
      </GestureHandlerRootView>
  );
}