import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Header from '~/Components/Layouts/Header';
import { ListStyle, DetailIcon } from '~/Components/Listing/Search';
import Button from '~/Components/UIControls/Button';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import { useAuth } from '~/Components/Hooks';
import { Tab, TabItem, TabTitleGroup, TabHeader, TabContent, TabTitle } from '~/Components/UIControls/Tab';
import ListTable from './component/ListTable';

const Screen = (props) => {
    const navigation = props.navigation;
    const tab = navigation.getParam('tab', 'first');
    const [firstId, setFirstId] = useState();
    const [secondId, setSecondId] = useState();
    const [thirdId, setThirdId] = useState();

    return (
        <BottomTabBarLayout>
            <Tab>
                <TabHeader>
                    <TabTitleGroup top={true}>
                        <TabTitle
                            onPress={() => {
                                navigation.setParams({ tab: 'first' });
                            }}
                            active={tab == 'first' ? true : false}
                            title="대분류"
                        />
                        <TabTitle
                            onPress={() => {
                                navigation.setParams({ tab: 'second' });
                            }}
                            active={tab == 'second' ? true : false}
                            title="중분류"
                        />
                        <TabTitle
                            onPress={() => {
                                navigation.setParams({ tab: 'third' });
                            }}
                            active={tab == 'third' ? true : false}
                            title="소분류"
                        />
                    </TabTitleGroup>
                </TabHeader>
                <TabContent>
                    <TabItem active={tab == 'first' ? true : false}>
                        <ListTable
                            navigation={navigation}
                            depth={0}
                            onSelect={({ id, name }) => {
                                setFirstId(id);
                                navigation.setParams({ tab: 'second' });
                            }}
                        />
                    </TabItem>
                    <TabItem active={tab == 'second' ? true : false}>
                        <ListTable
                            navigation={navigation}
                            depth={1}
                            load={false}
                            parent={firstId}
                            onSelect={({ id, name }) => {
                                setSecondId(id);
                                navigation.setParams({ tab: 'third' });
                            }}
                        />
                    </TabItem>
                    <TabItem active={tab == 'third' ? true : false}>
                        <ListTable
                            navigation={navigation}
                            depth={2}
                            load={false}
                            parent={secondId}
                            onSelect={({ id, name }) => {
                                setThirdId(id);
                            }}
                        />
                    </TabItem>
                </TabContent>
            </Tab>
        </BottomTabBarLayout>
    );
};

// header
Screen.navigationOptions = ({ navigation }) => {
    return {
        header: () => <Header navigation={navigation} title="자재 분류 코드 관리" />,
    };
};

export default Screen;
