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

const LANGUAGES = [
    "typescript",
    "javascript",
    "python",
    "csharp",
    "bash",
    "tsx",
    "jsx",
    "sql"
];

const LANGUAGES_DATA = LANGUAGES.map(item => ({
    __title: item,
    __key: item
}));

const DEFAULT_CODE = `import {
    CodeViewer
} from "ncore-ui-kit";

const App = () => {
    return <CodeViewer
        language="tsx"
        code={"console.log('Hello World');"}
    />;
};

export default App;`;

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    const [
        languageIndex,
        setLanguageIndex
    ] = useState<number>(0);

    const [
        code,
        setCode
    ] = useState<string>(DEFAULT_CODE);

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => <Header
                title={localize("codeViewer")}
                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("codeViewer-desc") || localize("codeViewer")}
            </Text>
            <View
                style={[
                    stylesheet.previewContainer,
                    {
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <CodeViewer
                    language={LANGUAGES[languageIndex]}
                    code={code}
                />
            </View>
            <View
                style={[
                    stylesheet.rowContainer,
                    {
                        marginBottom: spaces.spacingMd,
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <SelectBox
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = LANGUAGES.indexOf(selectedItems[0]!.__key);
                            if (index !== -1) setLanguageIndex(index);
                        }
                    }}
                    initialSelectedItems={

                        LANGUAGES_DATA[languageIndex]

                            ? [
                                LANGUAGES_DATA[languageIndex]!
                            ]

                            : []

                    }
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    title={localize("change-language")}
                    spreadBehaviour="free"
                    data={LANGUAGES_DATA}
                />
            </View>
            <TextAreaInput
                placeholder={localize("enter-code")}
                title={localize("codeViewer-code")}
                style={{
                    marginBottom: spaces.spacingMd
                }}
                isUpdateOnRealtime={true}
                spreadBehaviour="stretch"
                onChangeText={setCode}
                value={code}
            />
        </View>
    </PageContainer>;
};
export default CodeViewerPage;
