import InputLabel from "../common/InputLabel";
import AddIcon from './../../assets/images/PlusGreen.svg'
import FloatingItems from "../common/FloatingItems";
import React, {useEffect, useState} from "react";
import AddProperty from "../properties/AddProperty";
import PublicApi from "../../api/PublicAPi";
import SelectProperty from "../properties/SelectProperty";
import AdminApi from "../../api/AdminApi";
import {userToken} from "../../api/TokenApi";

export default function CreateCategoryStep2({categoryId}) {

    const [selectedProperties, setSelectedProperties] = useState([])
    const [properties, setProperties] = useState([])

    const attachProperty = async (propertyId, categoryId) => {
        await AdminApi.post(`properties/${propertyId}/attachCategory/${categoryId}`, {})
    }
    const detachProperty = async (propertyId, categoryId) => {
        await AdminApi.post(`properties/${propertyId}/detachCategory/${categoryId}`, {})
    }

    const getProperties = async () => {
        const fetchedProperties = await PublicApi.get(`properties/index/${await userToken()}`)
        setProperties(fetchedProperties)
    }
    const getCategoryProperties = async () => {
        const fetchedCategory = await PublicApi.get(`categories/show/${categoryId}`)
        if (fetchedCategory) {
            setSelectedProperties(fetchedCategory.properties)
        }
    }
    useEffect(() => {
        getProperties()
        getCategoryProperties()
    }, [])


    const handleDeleteProperty = (title) => {
        const deletedProperty = selectedProperties.find(prop => prop.title === title)
        detachProperty(deletedProperty.id, categoryId).then(() =>{
            getCategoryProperties()
        })
    }
    const handleChangePropertyStatus = (property) => {
        if (selectedProperties.find(prop => prop.id === property.id)) {
            detachProperty(property.id, categoryId).then(() => {
                getCategoryProperties()
            })
        } else {
            attachProperty(property.id, categoryId).then(() => {
                getCategoryProperties()
            })
        }
    }

    return (
        <div className={'flex flex-col pt-10 min-h-[50vh] mx-5'}>
            <SelectProperty
                properties={properties}
                selectedProperties={selectedProperties}
                handleChangePropertyStatus={handleChangePropertyStatus}
            />
            <FloatingItems
                containerClassName={'flex flex-wrap items-center justify-start mt-5'}
                itemClassName={'my-2'}
                onDelete={handleDeleteProperty}
                itemsList={selectedProperties.map(prop => prop.title)}
            />
            <InputLabel className={"justify-start font-[Vazirmatn] font-normal mt-5 mb-2 mr-2"}>
                <div className={'flex flex-row items-center justify-center'}>
                    ویژگی جدید
                    <img alt={''} src={AddIcon}/>
                </div>
            </InputLabel>
            <AddProperty categoryId={categoryId} callback={() => {
                getProperties().then()
                getCategoryProperties().then()
            }}/>
        </div>
    )
}