import Input from '@/Components/Input'
import TextArea from '@/Components/TextArea'
import Button from '@/Components/Button'
import ImageInput from '@/Components/ImageInput'
import SelectInput from '@/Components/SelectInput'

import { useState } from 'react'

import { router } from '@inertiajs/react'

export default function ProductForm({ onCancel, onSubmit, categories, preselectedCategory=null }) {

    categories = categories.map((category) => ({value: category.id, label: category.title}));

    let [title, setTitle] = useState();
    let [description, setDescription] = useState();
    let [price, setPrice] = useState(0);
    let [inventory, setInventory] = useState(-1);

    let [selectedImage, setSelectedImage] = useState(null);

    let [createCategoryOpen, setCreateCategoryOpen] = useState(false);
    let [selectedCategory, setSelectedCategory] = useState(preselectedCategory ?? (categories[0] ?? null));

    function handleSubmit(){
        let data = {
            title: title,
            description: description,
            price: price,
            inventory: inventory,
            image: selectedImage,
        }
        console.log(selectedCategory);
        router.post('/products/store/'+String(selectedCategory.value), data);
        onCancel();
    }

    function handleCreateCategoryOpen(inputValue){
        setCategoryTitle(inputValue);
        setCreateCategoryOpen(true);
    }


    function handleModalCancel(){
        setCreateCategoryOpen(false);
        setCreateTagOpen(false);
    }

    function handleCategoryModalSubmit(){
        setCreateCategoryOpen(false);
        setData('category', {value: categoryTitle, label: categoryTitle});
    }

    return (
        <div className="flex flex-col bg-white rounded-lg w-full max-w-4xl h-fit p-8 space-y-8">
            <span className="pb-4 text-lg font-semibold">محصول جدید</span>
            <SelectInput value={ selectedCategory } setValue={e => setSelectedCategory(e) } options={ categories } onCreateOption={ handleCreateCategoryOpen } label="دسته بندی" className="w-full"/>
            <div className="flex flex-col lg:flex-row">
                <div className="w-full pl-4 flex flex-col space-y-4">
                    <Input label="عنوان" className="w-full ml-6" onChange={(e) => {setTitle(e.target.value)}} />
                    <div className="flex justify-between">
                        <Input label="قیمت" className="w-full ml-6" onChange={(e) => {setPrice(e.target.value)}} />
                        <Input label="موجودی" className="w-full" onChange={(e) => {setInventory(e.target.value)}} />
                    </div>
                    <TextArea label="توضیحات (اختیاری)" className="" onChange={(e) => {setDescription(e.target.value)}}/>
                </div>
                <div className="w-full pr-4 h-full">
                    <ImageInput id="image" image={selectedImage && (
                        <div className="flex flex-col justify-center w-full h-52 rounded-2xl">
                            <img
                                alt="not found"
                                className="h-52 object-scale-down"
                                src={URL.createObjectURL(selectedImage)}
                            />
                            <button class="z-10" onClick={() => setSelectedImage(null)}>حذف</button>
                        </div>
                    )} onChange={(event) => {
                        setSelectedImage(event.target.files[0]);
                    }} label="تصویر" />
                </div>
            </div>
            <div className="flex">
                    <Button onClick={ onCancel } className="bg-white text-black border-gray-300 border-2 w-full transition hover:bg-zinc-100 ml-4 shadow-none">لغو</Button>
                    <Button onClick={ handleSubmit } className="w-full text-white bg-zinc-800 transition hover:bg-zinc-700">ایجاد</Button>
                </div>
        </div>
    );
}