import { useState } from "react";
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 {
  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";

export default function CreateNotice() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [price, setPrice] = useState("");
  const [category, setCategory] = useState("");
  const [error, setError] = useState({
    title: false,
    description: false,
    price: false,
    category: false,
  });

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

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

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

  return (
    <FormControl className="p-4 border rounded-lg border-outline-300">
      <VStack space="xl">
        <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>
                <SelectItem label="Meble" value="Furniture" />
                <SelectItem label="Biżuteria" value="Jewelry" />
                <SelectItem label="Ceramika" value="Ceramics" />
              </SelectContent>
            </SelectPortal>
          </Select>
        </VStack>
        <Button
          className="ml-auto"
          onPress={() => addNotice()}
          disabled={noticeMutation.isLoading}
        >
          <ButtonText className="text-typography-0">Save</ButtonText>
        </Button>
      </VStack>
    </FormControl>
  );
}