import InputLabel from "../common/InputLabel";
import AddIcon from "../../assets/images/PlusGreen.svg";
import PenIcon from './../../assets/images/BluePen.svg'
import {FormControl, MenuItem, Select} from "@mui/material";
import {useEffect, useState} from "react";
import PublicApi from "../../api/PublicAPi";
import adminApi, {goToLoginPage} from "../../api/AdminApi";
import {userToken} from "../../api/TokenApi";


export default function AddProductStep2({onChangeCategory, selectedCategory, onChangeProperty}) {
    const [categories, setCategories] = useState([])
    const [properties, setProperties] = useState([])

    // fetch all categories and set
    const getCategories = async () => {
        const fetchedCategories = await PublicApi.get(`categories/index/${await userToken()}`)
        setCategories(fetchedCategories)
    }
    useEffect(() => {
        getCategories()
    }, [])

    // set properties based on selected category
    useEffect(() => {
        if (selectedCategory) {
            const selectedCategoryObject = categories.filter((category) => category.id === selectedCategory)[0]
            setProperties(selectedCategoryObject.properties)
        }
    }, [selectedCategory])

    return (
        <div className={'flex flex-col pt-10 min-h-[50vh] mx-5'}>
            <InputLabel className={"justify-start font-[Vazirmatn] font-normal mb-2 mr-2 "} htmlFor="title">
                <div className={'flex flex-row items-center justify-center'}>
                    انتخاب دسته بندی
                    <img className={'mx-1'} alt={''} src={PenIcon}/>
                    <img className={'mx-1'} alt={''} src={AddIcon}/>
                </div>
            </InputLabel>
            <FormControl className={"w-full"}>
                <Select
                    sx={{height: '2.6rem', borderRadius: '8px', fontFamily: 'Vazirmatn', color: '#1e1e1e'}}
                    value={selectedCategory}
                    onChange={(e) => onChangeCategory(e)}
                >
                    {
                        categories.map((category, index) => (
                            <MenuItem
                                divider={true}
                                sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}}
                                key={index}
                                value={category.id}
                            >
                                {category.title}
                            </MenuItem>
                        ))
                    }
                </Select>
            </FormControl>
            <table className="w-full text-right mt-8">
                <thead className={'text-white font-[Vazirmatn] bg-dark w-full'}>
                <tr className={''}>
                    <th className={'border-1 border-[#B3B3B3] p-3'}>ویژگی</th>
                    <th className={'border-1 border-[#B3B3B3] pr-3'}>مقدار</th>
                </tr>
                </thead>
                <tbody>
                    {
                        properties.map((property, index) => (
                            <tr key={index} className="text-right font-normal">
                                <td className="border-1 border-[#B3B3B3]"><span className={'mr-2 w-full border-0'}>{property.title}</span></td>
                                <td className="border-1 border-[#B3B3B3]"><input onChange={(e) => onChangeProperty(property.slug, e.target.value)} className={'w-full border-0'}/></td>
                            </tr>
                            )
                        )
                    }
                </tbody>
            </table>
        </div>
    )
}