import {
    useLayoutEffect,
    useState,
    useRef
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    SelectSheet,
    CodeViewer,
    Header,
    Button,
    Text
} from "ncore-ui-kit";
import {
    useNavigation
} from "@react-navigation/native";
import type RootStackParamList from "../../../navigation/type";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import type {
    IBottomSheetRef
} from "ncore-ui-kit";

const SelectSheetPage = () => {
    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const {
        spaces
    } = NCoreUIKitTheme.useContext();

    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    const bottomSheetRef = useRef<IBottomSheetRef>(null);

    const [
        isActive,
        setIsActive
    ] = useState<boolean>(false);

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => <Header
                title={localize("components-selectSheet")}
                isWrapSafeareaContext={false}
                navigation={navigation}
                isGoBackEnable={true}
            />,
            headerShown: true
        });
    }, []);

    return <PageContainer
        scrollViewProps={{
            contentContainerStyle: stylesheet.scrollContent
        }}
        isWorkWithHeaderSpace={false}
        scrollViewStyle={[
            stylesheet.container
        ]}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <Text
                style={stylesheet.descText}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("selectSheet-desc")}
            </Text>
            <Text
                variant="titleMediumSize"
                style={stylesheet.title}
            >
                {localize("components-selectSheet")}
            </Text>
            <Button
                onPress={() => setIsActive(true)}
                spreadBehaviour="stretch"
                title="Open Select Sheet"
            />
            <View
                style={{
                    marginVertical: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    SelectSheet\n} from \"ncore-ui-kit\";\n\n<SelectSheet\n    isActive={isActive}\n    setIsActive={setIsActive}\n    data={[]}\n/>"}
                    language="tsx"
                />
            </View>
            <SelectSheet
                keyExtractor={(item: { __key: string }) => item.__key}
                cancel={() => setIsActive(false)}
                bottomSheetRef={bottomSheetRef}
                ok={() => setIsActive(false)}
                setIsMoreLoading={() => {}}
                isWorkWithRealtime={true}
                setIsActive={setIsActive}
                setSearchText={() => {}}
                selectObject={() => {}}
                setIsLoading={() => {}}
                selectBoxKey="example"
                mainSelectedItems={[]}
                isMoreLoading={false}
                selectAll={() => {}}
                cleanAll={() => {}}
                isActive={isActive}
                searchedData={[]}
                isLoading={false}
                searchText=""
                data={[]}
            />
        </View>
    </PageContainer>;
};
export default SelectSheetPage;
