import React, { useState, useRef } from 'react';
import { Select } from 'antd';
import _ from 'lodash';

const errorStyle = {
    border: '#ff00002c 1px solid',
    backgroundColor: '#ff00001c'
}

const TopicOptionData = ({ tableData, setData, subjectList, subjectId, index }) => {
    const mounted = useRef(true);
    const [value, setValue] = useState("");
    const [loading, setLoading] = useState(false);
    const [topicOption, setTopicOptions] = useState([]);
    const [errorStatus, setErrorStatus] = useState(true);

    React.useEffect(() => {
        // tableData[index].category = "";
        // setData([...tableData]);
        function a() {
            const receiveData = fetchTopicData();
            setTopicOptions(() => [...receiveData]);
            setData([...tableData]);
        }
        if (tableData[index].category) {
            setValue(tableData[index].category)
        } else setValue(undefined);
        a();
    }, [subjectId]);

    React.useEffect(() => {
        return () => {
            mounted.current = false;
        }
    }, [])

    function fetchTopicData() {
        setLoading(true);
        if (subjectId) {
            // const response = await selectorService.loadCategory(subjectId);
            // const fetchedData = await response.result;

            const fetchedSubjectList = subjectList;

            return getTopicIDRef(fetchedSubjectList);            
        } else {
            setLoading(false);
            return [];
        }
    };

    function getTopicIDRef(fetchedSubjectList) {
        // conditional property to check if value is not undefined before trying to get topicList
        const fetchedTopicData = fetchedSubjectList.find(subject => (subject.value === subjectId))?.topicList; 

        if(!(_.isEmpty(fetchedTopicData))) {
            // looping through each topic in the selected subject
            const parseFetchedData = fetchedTopicData.map(item => {
                // checking to see if errors are found, in which case the errorStatus is activated (for the red outline)
                if(tableData[index].category === item.id) {
                    setErrorStatus(false);
                }
                return ({ label: item.name, value: item.id });
            });
            setLoading(false);
            return parseFetchedData;
        } else {
            setLoading(false);
            return [];
        }
    }

    if (!subjectId || topicOption.length < 1 || loading) {
        return <Select placeholder={!loading? "<-- Assign Subject first": "Loading..."}
            style={ errorStatus? errorStyle: null}
            disabled
            dropdownMatchSelectWidth={120} options={[]} />
    }

    return (
        <Select
            placeholder="Assign a topic"
            style={ errorStatus? errorStyle: null}
            bordered={false}
            value={value||undefined}
            dropdownMatchSelectWidth={170}
            onChange={(change, obj) => {
                if (mounted.current) {
                    tableData[index].category = change;
                    setErrorStatus(false);
                    // fetchTopicData();
                    setValue(change);
                    setData([...tableData]);

                }
            }}
            options={topicOption}
        />
    );
}

export default TopicOptionData;
