import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from '~/Components/UIControls/Icon';
import Button from '~/Components/UIControls/Button';
import TreeView from 'react-native-final-tree-view';
import Theme from '~/Themes';
import fetchGet from '~/Utils/fetch';


function getIndicator(isExpanded, hasChildrenNodes) {
    if (!hasChildrenNodes) {
        return <></>;
    } else if (isExpanded) {
        return <Icon iconFamily="AntDesign" iconName="minussquare" size={24} color="#777" />;
    } else {
        return <Icon iconFamily="AntDesign" iconName="plussquare" size={24} color="#777" />;
    }
}

const CodeClassCategory = ({ onSelect, apiUrl }) => {
    const [data, setData] = useState();
    const [selectedValue, setSelectedValue] = useState();
    const [expandAll, setExpandAll] = useState(false);
    const [reload, setReload] = useState(false);

    useEffect(() => {
        if (reload) {
            setReload(false);
        }
    }, [reload]);

    useEffect(() => {
        fetchGet(apiUrl)
            .then((data) => {
                setData(data);
            })
            .catch((e) => {
                showMessage(e.message);
            });
    }, []);

    return (
        <>
            <View style={{ flexDirection: 'row' }}>
                <Button
                    onPress={() => {
                        setExpandAll(true);
                        setReload(true);
                    }}
                    buttonStyle={{ width: 'auto', height: 30, paddingHorizontal: 12 }}
                >
                    전체열기
                </Button>
                <Button
                    onPress={() => {
                        setExpandAll(false);
                        setReload(true);
                    }}
                    buttonStyle={{ width: 'auto', height: 30, paddingHorizontal: 12 }}
                >
                    전체닫기
                </Button>
                <Button
                    onPress={() => {
                        setSelectedValue(null);
                    }}
                    buttonStyle={{ width: 'auto', height: 30, paddingHorizontal: 12 }}
                >
                    선택취소
                </Button>
            </View>

            {data && !reload ? (
                <TreeView
                    initialExpanded={expandAll}
                    getCollapsedNodeHeight={({ level }) => {
                        return 32;
                    }}
                    data={data}
                    renderNode={({ node, level, isExpanded, hasChildrenNodes }) => {
                        var checked = node.id == selectedValue;
                        return (
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <View
                                    style={{
                                        marginLeft: 25 * level,
                                        marginRight: 5,
                                    }}
                                >
                                    {getIndicator(isExpanded, hasChildrenNodes)}
                                </View>
                                <TouchableOpacity
                                    onPress={() => {
                                        setSelectedValue(node.id);
                                        onSelect({ node, level });
                                    }}
                                    style={{
                                        backgroundColor: checked ? Theme.COLORS.PRIMARY : '',
                                        padding: 2,
                                        paddingHorizontal: 6,
                                        borderRadius: 4,
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 20,
                                            lineHeight: 25,
                                            color: checked ? 'white' : '',
                                        }}
                                    >
                                        {node.name}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        );
                    }}
                />
            ) : (
                <ActivityIndicator size="large" color="#0b83e6" />
            )}
        </>
    );
};

export default CodeClassCategory;
