import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    CodeViewer,
    SelectBox,
    Tooltip,
    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 {
    TooltipLocation,
    ITooltipProps
} from "ncore-ui-kit";

const TOOLTIP_TYPES: Array<ITooltipProps["type"]> = [
    "neutral",
    "primary",
    "danger",
    "warning",
    "success",
    "info"
];

const TOOLTIP_TYPES_DATA = TOOLTIP_TYPES.map(item => ({
    __title: item as string,
    __key: item as string
}));

const TOOLTIP_LOCATIONS: Array<TooltipLocation> = [
    {
        horizontal: "center",
        vertical: "top"
    },
    {
        horizontal: "center",
        vertical: "bottom"
    },
    {
        horizontal: "left",
        vertical: "center"
    },
    {
        horizontal: "right",
        vertical: "center"
    }
];

const TOOLTIP_LOCATIONS_DATA = [
    {
        __title: "Top",
        __key: "0"
    },
    {
        __title: "Bottom",
        __key: "1"
    },
    {
        __title: "Left",
        __key: "2"
    },
    {
        __title: "Right",
        __key: "3"
    }
];

const TooltipPage = () => {
    const {
        radiuses,
        borders,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    const [
        typeIndex,
        setTypeIndex
    ] = useState<number>(0);

    const [
        locationIndex,
        setLocationIndex
    ] = useState<number>(0);

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => <Header
                isWrapSafeareaContext={false}
                title={localize("tooltip")}
                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("tooltip-desc")}
            </Text>
            <View
                style={[
                    stylesheet.previewContainer,
                    {
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd,
                        paddingVertical: spaces.spacingLg
                    }
                ]}
            >
                <Tooltip
                    subTitle={localize("example-tooltip-subtitle")}
                    location={TOOLTIP_LOCATIONS[locationIndex]}
                    title={localize("example-tooltip-title")}
                    type={TOOLTIP_TYPES[typeIndex]}
                >
                    <Button
                        title={localize("hover-or-press-me")}
                        onPress={() => {}}
                    />
                </Tooltip>
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    Tooltip,\n    Button\n} from \"ncore-ui-kit\";\n\n<Tooltip\n    location={{\n        horizontal: \"center\",\n        vertical: \"top\"\n    }}\n    title=\"Tooltip Title\"\n    subTitle=\"Tooltip Subtitle\"\n    type=\"primary\"\n>\n    <Button\n        title=\"Hover Me\"\n        onPress={() => {}}\n    />\n</Tooltip>"}
                    language="tsx"
                />
            </View>
            <View
                style={[
                    stylesheet.rowContainer,
                    {
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <SelectBox
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = TOOLTIP_TYPES.indexOf(selectedItems[0]!.__key as ITooltipProps["type"]);
                            if (index !== -1) setTypeIndex(index);
                        }
                    }}
                    initialSelectedItems={
                        TOOLTIP_TYPES_DATA[typeIndex]
                            ? [
                                TOOLTIP_TYPES_DATA[typeIndex]!
                            ]
                            : []
                    }
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    title={localize("change-type")}
                    data={TOOLTIP_TYPES_DATA}
                    spreadBehaviour="free"
                />
                <SelectBox
                    initialSelectedItems={
                        TOOLTIP_LOCATIONS_DATA[locationIndex]
                            ? [
                                {
                                    ...TOOLTIP_LOCATIONS_DATA[locationIndex]!,
                                    __title: localize(TOOLTIP_LOCATIONS_DATA[locationIndex]!.__title.toLowerCase() as keyof NCoreUIKit.Translation)
                                }
                            ]
                            : []
                    }
                    data={TOOLTIP_LOCATIONS_DATA.map(item => ({
                        ...item,
                        __title: localize(item.__title.toLowerCase() as keyof NCoreUIKit.Translation)
                    }))}
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = parseInt(selectedItems[0]!.__key);
                            if (!isNaN(index)) setLocationIndex(index);
                        }
                    }}
                    titleExtractor={(item) => item.__title}
                    title={localize("change-location")}
                    keyExtractor={(item) => item.__key}
                    spreadBehaviour="free"
                />
            </View>
        </View>
    </PageContainer>;
};
export default TooltipPage;
