import React, { useEffect, createContext, Fragment, useContext, useLayoutEffect, useState } from 'react';
import Styled from 'styled-components/native';
import { View } from 'react-native';
import Theme from '~/Themes';
import { SearchProvider } from '../Listing/Search';

const Container = Styled.View`
    flex: 1;
    flex-direction: column;
    background-color: #ffffff;
`;
const HeaderContainer = Styled.View`
    height: 50px;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 0px;
    border-color: #e9e9e9;
    border-bottom-width: 1px;
`;
const Content = Styled.View`
    flex: 1;
    background-color: #ffffff;
    overflow:hidden;
`;
const ScrollContainer = Styled.ScrollView`
    background-color: white;
`;

class ActionProvider {
    callAction = (action, parameter = {}) => {
        console.log('default callAction - action : ', action);
    };
    setCallActionListener = (handler = (action, parameter = {}) => {}) => {
        this.callAction = handler;
    };
}
const contextParameter = {
    action: new ActionProvider(),
};

const LayoutContext = createContext(contextParameter);

export const useLayoutAction = () => {
    const layout = useContext(LayoutContext);
    console.log('useLayoutAction - return : ', layout.action.callAction);
    return { callAction: layout.action.callAction };
};

export const PopupLayout = ({ children, title = '', header = Fragment, headerProps = {}, actionHandler = () => {}, style = {} }) => {
    const layout = useContext(LayoutContext);
    const [layoutState, setLayoutState] = useState(layout);
    const HeaderComponent = header;

    useEffect(() => {
        console.log('layout change.. setCallActionListener');
        layoutState.action.setCallActionListener((action, parameter = {}) => {
            actionHandler(action, parameter);
        });
        setLayoutState({
            ...layoutState,
        });
    }, [actionHandler]);

    return (
        <LayoutContext.Provider value={layoutState}>
            <Container>
                {header != null && (
                    <HeaderContainer>
                        <PopupHeader title={title}>
                            <HeaderComponent {...headerProps} />
                        </PopupHeader>
                    </HeaderContainer>
                )}
                <Content style={[style]}>{children}</Content>
            </Container>
        </LayoutContext.Provider>
    );
};

const HeaderTitle = Styled.Text`
    flex: 1;
    font-size: 20;
    line-height: 29;
    letter-spacing: -2;
    font-family: ${Theme.Fonts.Medium};
    include-font-padding: false;
    padding-left:19;
`;
const ButtonContainer = Styled.View`
    flex-direction: row;
    padding-right: 15;
`;
export const PopupHeader = ({ children, title = '' }) => {
    const layout = useContext(LayoutContext);

    return (
        <Fragment>
            <HeaderTitle>{title}</HeaderTitle>
            <ButtonContainer>{children}</ButtonContainer>
        </Fragment>
    );
};
