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 {ScrollView} from '@gluestack-ui/themed';
import * as ImagePicker from 'expo-image-picker';
import {
    Select,
    SelectTrigger,
    SelectInput,
    SelectIcon,
    SelectPortal,
    SelectBackdrop,
    SelectContent,
    SelectItem,
    SelectScrollView,
} 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([]);
    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.map(asset => asset.uri));
        }
    };

    return (
        <ScrollView h="$80" w="$80">
            <FormControl className="p-4 border rounded-lg border-outline-300">
                <VStack space="xl">
                    <VStack space="md">
                        <Text className="text-typography-500">Zdjęcia</Text>
                        <Button onPress={pickImage}>
                            <ButtonText>
                                Wybierz zdjęcia
                            </ButtonText>
                        </Button>
                      <Text size="sm"
                            bold="true"
                      >
                          Pierwsze zdjęcie będzie zdjęciem głównym</Text>
                        {image && image.length > 0 && (
                            <VStack space="xs" className="flex-row flex-wrap">
                                {image.map((img, index) => (
                                    <Image key={index} source={{uri: img}} style={styles.image} className="m-1"/>
                                ))}
                            </VStack>
                        )}
                    </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 style={{maxHeight: 400}}>
                                    <SelectScrollView>
                                        {selectItems.map((item) => (
                                            <SelectItem key={item.value} label={item.label} value={item.value}/>
                                        ))}
                                    </SelectScrollView>
                                </SelectContent>
                            </SelectPortal>
                        </Select>
                    </VStack>
                    <Button
                        className="mt-5 w-full"
                        onPress={() => addNotice()}
                        disabled={noticeMutation.isLoading}
                    >
                        <ButtonText className="text-typography-0">Dodaj</ButtonText>
                    </Button>
                </VStack>
            </FormControl>
        </ScrollView>
    );
}