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";

export default function CreateNotice() {
  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]">
            <InputField type="text" />
          </Input>
        </VStack>

        <VStack space="xs">
          <Text className="text-typography-500">Opis</Text>
          <Textarea size="md" className="min-w-[250px] ">
            <TextareaInput placeholder="Opisz produkt" />
          </Textarea>
        </VStack>

        <VStack space="xs">
          <Text className="text-typography-500">Cena</Text>
          <Input className="min-w-[250px]">
            <InputField type="text" />
          </Input>
        </VStack>
        <VStack space="xs">
          <Text className="text-typography-500">Kategoria</Text>
          <Select>
            <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">
          <ButtonText className="text-typography-0">Save</ButtonText>
        </Button>
      </VStack>
    </FormControl>
  );
}