import React, { useContext } from 'react';
import { Spin, Select, Space } from 'antd';
import _ from 'lodash';
import { RepeatedData } from '../RepeatedDataProvider';
import { useTranslation } from 'react-i18next';

// import { selectorService } from '../../services/selectorService';
// import { SubjectSubscriber } from 'rxjs/internal/Subject';
// import { CaretDownOutlined } from '@ant-design/icons';



const SelectorNew = ({serviceCall, pathActive, handleSelection, property, placeholder, chosenValue = undefined}) => {

    const {t} = useTranslation();

    const {data, setData} = useContext(RepeatedData);

    const [items, setItems] = React.useState([]);
    const [loading, isLoading] = React.useState(true);
    const [selected, setSelected] = React.useState();

    // React.useEffect(() => {
    //     console.log(property, chosenValue);
    //     setSelected(chosenValue);
    // }, [chosenValue]);

    React.useEffect(() => {
        async function a() {
            if(property === 'subject') {
                if(data.subjects) {
                    const result = data.subjects;
                    if(_.isEmpty(result)) {
                        setItems([]);
                    } else {
                        await setItems([...result]);
                        setSelected(chosenValue);
                    }
                    isLoading(false);
                } else {
                    setItems([]);                    
                    handleChange();
                    isLoading(true);
                }
            }
            if(property === 'category') {
                if(pathActive){
                    property === 'category' && handleChange();
                    const fetchData = await serviceCall(pathActive);
                    if(fetchData) {
                        const result = await fetchData.result;
                        // console.log(result);
                        if(_.isEmpty(result)) {
                            setItems([]);
                        } else {
                            await setItems([...result]);
                            setSelected(chosenValue);
                        }
                        isLoading(false); 
                    }
                } else {
                    setItems([]);                    
                    handleChange();
                    isLoading(true);
                }
            }
            if(property === 'questionType') {
                // const fetchData = await serviceCall();
                if(data.questionTypes) {
                    // const result = await fetchData.result;
                    const result = data.questionTypes;
                    // console.log(result);
                    if(_.isEmpty(result)) {
                        setItems([]);
                    } else {
                        await setItems([...result]);
                        setSelected(chosenValue);
                    }
                    isLoading(false); 
                } else {
                    setItems([]);
                } 
            }
            if (property === 'complexity') {
                setItems([
                    {
                        name: 'Easy',
                        value: 1,
                        id: 1
                    },
                    {
                        name: 'Medium',
                        value: 2,
                        id: 2
                    },
                    {
                        name: 'Difficult',
                        value: 3,
                        id: 3
                    }
                ]);
                setSelected(chosenValue);
                isLoading(false);
            }
        }
        a();
    }, [pathActive, data]);

    function handleChange(event, objectSelected) {
        if(loading) return;
        event? setSelected(event) : setSelected(null);
        // console.log(event, objectSelected?.children, loading);
        handleSelection(property, event, objectSelected);
    }

    return (
            <Select
                size='normal'
                // suffixIcon={<CaretDownOutlined />}
                placeholder={placeholder}
                dropdownRender={(menu) => {
                    return (
                        <>
                            {!loading? <>{menu}</> : 
                            <>
                                <Space style={{display: 'flex', justifyContent: 'center', flexDirection: 'column', padding: 10}}>
                                    <Spin/>
                                    { pathActive || property !== "category"? null : <>{t('selector.warning1')}</> }
                                </Space>
                            </>
                            }
                        </>
                    );
                }}
                allowClear
                onChange={handleChange}
                value={selected || undefined}
                // style={{minWidth: '150px', flex: '0.5 1 160px'}}
            >
                {items.map((item) => (
                    <Select.Option key={item.id} value={item.code||item.id}>{item.name}</Select.Option>
                ))}
            </Select>
    );
}

export default SelectorNew;