import { useState, useEffect  } from "react";
import { Image, StyleSheet } from "react-native";
import { Button, ButtonText } from "@/components/ui/button";
import { FormControl } from "@/components/ui/form-control";
import { Input, InputField } from "@/components/ui/input";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { Textarea, TextareaInput } from "@/components/ui/textarea";
import * as ImagePicker from 'expo-image-picker';
import {
  Select,
  SelectTrigger,
  SelectInput,
  SelectIcon,
  SelectPortal,
  SelectBackdrop,
  SelectContent,
  SelectDragIndicator,
  SelectDragIndicatorWrapper,
  SelectItem,
} from "@/components/ui/select";

import { ChevronDownIcon } from "@/components/ui/icon";
import { useMutation } from "@tanstack/react-query";
import {createNotice} from "@/api/notices";
import {listCategories} from "@/api/categories";

export default function CreateNotice() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [price, setPrice] = useState("");
  const [category, setCategory] = useState("");
  const [image, setImage] = useState(null);
  const [selectItems, setSelectItems] = useState([]);

  useEffect(() => {
    let isMounted = true;

    const fetchSelectItems = async () => {
      try {
        let data = await listCategories();
        if (isMounted && Array.isArray(data)) {
          setSelectItems(data);
        }
      } catch (error) {
        console.error('Error fetching select items:', error);
      }
    };

    fetchSelectItems();

    return () => {
      isMounted = false;
    };
  }, []);

  const [error, setError] = useState({
    title: false,
    description: false,
    price: false,
    category: false,
  });

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    image: {
      width: 100,
      height: 100,
    },
  });

  const noticeMutation = useMutation({
    mutationFn: () =>
      createNotice({
        title: title,
        clientId: 1,
        description: description,
        price: parseFloat(price),
        category: category,
        status: "ACTIVE",
        image: image,
      }),
    onSuccess: () => {
      console.log("Notice created successfully");
    },
    onError: (error) => {
      console.error("Error creating notice. Erroe message: ", error.message);
    },
  });

  const addNotice = () => {
    setError({
      title: !title,
      description: !description,
      price: !price,
      category: !category,
    });

    if (!title || !description || !price || !category) {
      console.log("Error in form");
      return;
    }
    noticeMutation.mutate();
  };

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      selectionLimit: 8,
      allowsEditing: false,
      allowsMultipleSelection: true,
      aspect: [4, 3],
      quality: 0.5,
    });

    if (!result.canceled) {
      // await uploadImage(1, result.assets[0].uri);
      setImage(result.assets[0].uri);
    }
  };

  return (
    <FormControl className="p-4 border rounded-lg border-outline-300">
      <VStack space="xl">
        <VStack space="xs">
            <Text className="text-typography-500">Zdjęcie</Text>
          <Button onPress={pickImage}>
            <ButtonText>
              Upload image
            </ButtonText>
          </Button>
          {image && <Image source={{ uri: image }} style={styles.image}/>}
        </VStack>

        <VStack space="xs">
          <Text className="text-typography-500">Tytuł</Text>
          <Input className="min-w-[250px]" isInvalid={error.title}>
            <InputField
              type="text"
              value={title}
              onChangeText={(value) => setTitle(value)}
            />
          </Input>
        </VStack>

        <VStack space="xs">
          <Text className="text-typography-500">Opis</Text>
          <Textarea
            size="md"
            className="min-w-[250px] "
            isInvalid={error.description}
          >
            <TextareaInput
              placeholder="Opisz produkt"
              value={description}
              onChangeText={(value) => setDescription(value)}
            />
          </Textarea>
        </VStack>

        <VStack space="xs">
          <Text className="text-typography-500">Cena</Text>
          <Input className="min-w-[250px]" isInvalid={error.price}>
            <InputField
              type="text"
              value={price}
              onChangeText={(value) => setPrice(value)}
            />
          </Input>
        </VStack>
        <VStack space="xs">
          <Text className="text-typography-500">Kategoria</Text>
          <Select
            onValueChange={(value) => setCategory(value)}
            isInvalid={error.category}
          >
            <SelectTrigger variant="outline" size="md">
              <SelectInput placeholder="Wybierz kategorię" />
              <SelectIcon className="mr-3" as={ChevronDownIcon} />
            </SelectTrigger>
            <SelectPortal>
              <SelectBackdrop />
              <SelectContent>
                <SelectDragIndicatorWrapper>
                  <SelectDragIndicator />
                </SelectDragIndicatorWrapper>
                {selectItems.map((item) => (
                    <SelectItem key={item.value} label={item.label} value={item.value}/>
                ))}
              </SelectContent>
            </SelectPortal>
          </Select>
        </VStack>
        <Button
          className="ml-auto"
          onPress={() => addNotice()}
          disabled={noticeMutation.isLoading}
        >
          <ButtonText className="text-typography-0">Save</ButtonText>
        </Button>
      </VStack>
    </FormControl>
  );
}