import {
    useLayoutEffect,
    useState
} from "react";
import {
    Platform,
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    CodeViewer,
    CodeEditor,
    Header,
    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 {
    File
} from "lucide-react-native";

const CodeEditorPage = () => {
    const {
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

    const [
        code,
        setCode
    ] = useState<string>("const hello = \"world\";\n\nconst greet = async (name) => {\n    console.log(hello, name);\n};\n\ngreet(\"NCore\");");

    return <PageContainer
        scrollViewProps={{
            contentContainerStyle: stylesheet.scrollContent
        }}
        isWorkWithHeaderSpace={false}
        scrollViewStyle={[
            stylesheet.container
        ]}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <Text
                style={stylesheet.marginContainer}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("codeEditor-desc")}
            </Text>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    CodeEditor\n} from \"ncore-ui-kit\";\n\n<CodeEditor\n    language=\"javascript\"\n    onChangeText={setCode}\n    value={code}\n    isScrollable={true}\n    isToolbarVisible={true}\n    toolbarActions={[\n        {\n            icon: ({ color, size }) => <File color={colors.content.icon[color]} size={size} />,\n            content: () => {\n                // Return your ReactNode options here.\n            }\n        }\n    ]}\n/>"}
                    language="tsx"
                />
            </View>
            <CodeEditor
                toolbarActions={[
                    {
                        actions: [
                            {
                                onPress: () => {
                                    if (Platform.OS === "web") {
                                        const input = document.createElement("input");

                                        input.type = "file";
                                        input.accept = ".js,.ts,.tsx,.json,.txt";

                                        input.onchange = (e) => {
                                            const file = (e.target as HTMLInputElement).files?.[0];

                                            if (file) {
                                                const reader = new FileReader();

                                                reader.onload = (ev) => {
                                                    setCode(ev.target?.result as string);
                                                };

                                                reader.readAsText(file);
                                            }
                                        };

                                        input.click();
                                    } else {
                                        // TODO: Will be code it.
                                    }
                                },
                                titleKey: "open"
                            },
                            {
                                onPress: () => {
                                    if (Platform.OS === "web") {
                                        const blob = new Blob([
                                            code
                                        ], {
                                            type: "text/plain"
                                        });

                                        const url = URL.createObjectURL(blob);

                                        const a = document.createElement("a");
                                        a.href = url;
                                        a.download = "code.js";
                                        a.click();

                                        URL.revokeObjectURL(url);
                                    } else {
                                        // TODO: Will be code it.
                                    }
                                },
                                titleKey: "save"
                            }
                        ],
                        icon: ({
                            color,
                            size
                        }) => <File
                            color={colors.content.icon[color]}
                            size={size}
                        />,
                        variant: "filled",
                        titleKey: "file",
                        type: "neutral",
                        size: "medium"
                    }
                ]}
                style={stylesheet.editorScrollable}
                isToolbarVisible={true}
                onChangeText={setCode}
                language="javascript"
                isScrollable={true}
                value={code}
            />
        </View>
    </PageContainer>;
};
export default CodeEditorPage;
