import React, { useEffect, FunctionComponent, useContext, MutableRefObject, useRef, useState, memo } from 'react';
import { View, ViewStyle, KeyboardAvoidingView, TouchableWithoutFeedback, Text, Keyboard } from 'react-native';
import styles from './PixelRichTextEditorStyles';
import usePixelRichTextEditorTranslation from './PixelRichTextEditorTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import CNEditor, { CNToolbar, getDefaultStyles, getInitialObject } from "react-native-cn-richtext-editor";
import { PixelwolfText } from 'react-native-pixel-components';
interface IProps {
    // Props type definition
    style?: ViewStyle | ViewStyle[]
}

interface IState {
    // State type definition
    value: any
    selectedTag: string,
    selectedStyles: string[]
}

export const PixelRichTextEditor: FunctionComponent<IProps> = memo((props) => {

    const { I18n } = usePixelRichTextEditorTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    const defaultStyles = getDefaultStyles();
    let customStyles = {
        ...defaultStyles, body: { fontSize: 12 }, heading: { fontSize: 16 }, title: { fontSize: 20 }, div: {
            fontSize: 50
        }
    };
    const editor: MutableRefObject<CNEditor> = useRef(null)

    const initialState: IState = {
        value: [getInitialObject()],
        selectedStyles: [],
        selectedTag: 'body'
    };

    const [value, setValue] = useState(initialState.value)
    const [selectedStyles, setSelectedStyles] = useState(initialState.selectedStyles)
    const [selectedTag, setSelectedTag] = useState(initialState.selectedTag)

    // ComponentDidMount
    useEffect(() => {
        return () => {
            //ComponentDidUnmount
        }
    }, [])

    const onStyleKeyPress = (toolType) => {
        editor.current.applyToolbar(toolType);
    }

    const onSelectedTagChanged = (tag) => {
        setSelectedTag(tag)
    }

    const onSelectedStyleChanged = (styles) => {
        setSelectedStyles(styles)
    }

    const onValueChanged = (value) => {
        setValue(value)
        console.log(value)
    }

    return (
        <KeyboardAvoidingView
            behavior="padding"
            enabled
            keyboardVerticalOffset={0}
            style={[styles.flex1]}
            contentContainerStyle={[styles.fullWidthContainer, themeStore.getMainBackgroundStyle]}
        >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss} >
                <View style={[styles.flex1, styles.fullWidthContainer]}>
                    <CNEditor
                        ref={editor}
                        placeholder={'Digite algo...'}
                        onSelectedTagChanged={onSelectedTagChanged}
                        onSelectedStyleChanged={onSelectedStyleChanged}
                        value={value}
                        style={[themeStore.getAppBoldFontStyle]}
                        styleList={customStyles}
                        onValueChanged={onValueChanged}
                    />
                </View>
            </TouchableWithoutFeedback>



            <CNToolbar

                iconSetContainerStyle={[styles.centeredRow]}
                size={28}
                style={[styles.toolBar, styles.padding, themeStore.getMainBackgroundStyle]}
                iconSet={[
                    {
                        type: 'tool',
                        iconArray: [{
                            toolTypeText: 'image',
                            iconComponent:
                                <View style={[styles.centeredRow]}>
                                    <Text style={[styles.text13, themeStore.getAppBoldFontStyle]}>
                                        Imagem
                                    </Text>
                                </View>
                        }]
                    },
                    {
                        type: 'tool',
                        iconArray: [{
                            toolTypeText: 'bold',
                            iconComponent:
                                <View style={[styles.centeredRow]}>
                                    <Text style={[styles.text13, themeStore.getAppBoldFontStyle]}>
                                        Bold
                                    </Text>
                                </View>
                        }]
                    },
                    {
                        type: 'tool',
                        iconArray: [
                            {
                                toolTypeText: 'body',
                                iconComponent:
                                    <View style={[styles.centeredRow]}>
                                        <Text style={[styles.text13, themeStore.getAppBoldFontStyle]}>
                                            Body
                                        </Text>
                                    </View>
                            },
                        ]
                    },
                    {
                        type: 'tool',
                        iconArray: [
                            {
                                toolTypeText: 'ul',
                                iconComponent:
                                    <View style={[styles.centeredRow]}>
                                        <Text style={[styles.text13, themeStore.getAppBoldFontStyle]}>
                                            Lista
                                        </Text>
                                    </View>
                            }
                        ]
                    },
                    {
                        type: 'tool',
                        iconArray: [
                            {
                                toolTypeText: 'ol',
                                iconComponent:
                                    <View style={[styles.centeredRow]}>
                                        <Text style={[styles.text13, themeStore.getAppBoldFontStyle]}>
                                            Lista Numerada
                                        </Text>
                                    </View>
                            }
                        ]
                    },
                ]}
                selectedTag={selectedTag}
                selectedStyles={selectedStyles}
                onStyleKeyPress={onStyleKeyPress}
            />
        </KeyboardAvoidingView>
    );
})