import InputLabel from "../common/InputLabel";
import TextInput from "../common/TextInput";
import TextArea from "../common/TextArea";
import PlusIcon from './../../assets/images/PlusGray.svg'
import Input from "../common/Input";

export default function AddProductStep1({images, onChange, onChangeImage, onChangeAlt}) {
    return (
        <form className={'pt-10 min-h-[50vh] mx-5'}>
            <div className={'flex flex-col'}>
                <InputLabel className={"justify-start font-[Vazirmatn] font-normal mb-2 mr-2 "} htmlFor="title"
                            value="نام"/>

                <TextInput
                    id="title"
                    type="text"
                    name="title"
                    className="py-3 font-[Vazirmatn] flex text-right w-full placeholder:text-sm placeholder-[#828282] border-[#B3B3B3] bg-1"
                    placeholder={'مثال: محصولات ورزشی'}
                    onChange={onChange}
                />
            </div>
            <div className={'flex flex-col'}>
                <InputLabel className={"justify-start font-[Vazirmatn] font-normal mb-2 mr-2 "} htmlFor="inventory"
                            value="موجودی"/>

                <TextInput
                    id="inventory"
                    type="number"
                    name="inventory"
                    className="py-3 font-[Vazirmatn] flex text-right w-full placeholder:text-sm placeholder-[#828282] border-[#B3B3B3] bg-1"
                    placeholder={100}
                    onChange={onChange}
                />
            </div>
            <div className="flex flex-col mt-5">
                <InputLabel className={"justify-start font-normal font-[Vazirmatn] mb-2 mr-2 "} htmlFor="description"
                            value="توضیحات"/>

                <TextArea
                    id="description"
                    type="text"
                    rows={3}
                    name="description"
                    placeholder={'توضیح درباره این محصول'}
                    className="py-3 font-[Vazirmatn] flex text-right w-full placeholder:text-sm placeholder-[#828282] border-[#B3B3B3] bg-1"
                    onChange={onChange}
                />
            </div>
            <div className="flex flex-col mt-5">
                <InputLabel className={"justify-start font-normal font-[Vazirmatn] mb-2 mr-2 "} value="تصاویر"/>
                <div className="flex items-start justify-start mb-16 overflow-x-scroll">
                    <label
                        htmlFor="image-input"
                        className="flex items-center justify-center rounded-lg ml-3 cursor-pointer bg-[#CDCDCD] hover:bg-[#ABABAB]">
                        <div className="flex items-center justify-center w-[10vw] h-[10vw]">
                            <img alt={'click to upload'} src={PlusIcon}/>
                        </div>
                        <input id="image-input" accept={'image/*'} multiple type="file" className="hidden"
                               onChange={onChangeImage}/>
                    </label>
                    {
                        images.map((image, index) => (
                            <div key={index} className="flex flex-col items-center justify-center">
                                <img className={'preview-image mx-3 rounded-lg shadow-xl'}  src={image} alt={image.name}/>
                                <Input onChange={(e) =>{onChangeAlt(index, e.target.value)}} className={'m-3 rounded-lg w-[10vw] text-sm font-light font-[Vazirmatn]'} placeholder={'alt value'}/>
                            </div>
                        ))
                    }
                </div>

            </div>
        </form>
    )
}