import React, { Fragment, useEffect, useState } from 'react';
import Styled from 'styled-components/native';
import { View, Text } from 'react-native';
import { Util } from '~/Utils/utils';
import Theme from '~/Themes';

const TabContainer = Styled.View`
    flex-direction: column;
    width: 100%;
    height: 100%;
`;
export const Tab = ({children, style}) => {
    const childs = Array.isArray(children) ? children : [children];
    const items = {list:[]};

    useEffect(() => {
        items.list = [];
        let index = 0;
        for(let child of childs) {
            const { title='', component=null, style={} } = child.props;
            const item = {
                index: index,
                title: title,
                component: component,
                style: style,
            };
            items.list.push(item);
            index++;
        }
    }, [childs]);

    return (
        <TabContainer>
            {children}
        </TabContainer>
    )
}

const TabHeaderContainer = Styled.View`
    flex-direction: column;
    padding: 15px;
    border-bottom-width: 1;
    border-color: #e9e9e9;
`;
export const TabHeader = ({children}) => {
    return (
        <TabHeaderContainer>
            {children}
        </TabHeaderContainer>
    )
}

const TabTitleGroupContainer = Styled.View`
    flex-direction: row;
    border: 0px solid #dedede;
    border-right-width: 1;
    border-top-width: 0;
`;
export const TabTitleGroup = ({children, top=false, style={}}) => {
    const topStyle = top ? {borderTopWidth:1} : {};
    return (
        <TabTitleGroupContainer style={{...topStyle, ...style}}>{children}</TabTitleGroupContainer>
    )
}

const TabTitleContainer = Styled.TouchableOpacity`
    flex: 1;
    height: 45;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedede;
    border-right-width: 0;
    border-top-width: 0;
`;
const TabTitleText = Styled.Text`
    font-family: ${Theme.Fonts.Medium};
    font-size: 16;
    line-height: 24;
    letter-spacing: -1.6;
`;
export const TabTitle = ({title='', onPress=()=>{}, active=false, style={}, titleStyle={}}) => {
    const activeStyle = {backgroundColor:'white'};
    const activeTextStyle = {color:'#9aa3ac'};
    if(active) {
        activeStyle.backgroundColor = '#9aa3ac';
        activeTextStyle.color = 'white';
    }
    return (
        <TabTitleContainer onPress={onPress} style={{...activeStyle, ...style}}>
            <TabTitleText style={{...activeTextStyle, ...titleStyle}}>{title}</TabTitleText>
        </TabTitleContainer>
    )
}

const TabContentContainer = Styled.View`
    flex-direction: row;
    width: 100%;
    flex: 1;
    overflow: hidden;
`;
export const TabContent = ({children}) => {
    return (
        <TabContentContainer>
            {children}
        </TabContentContainer>
    )
}

const TabItemContainer = Styled.View`
    position: absolute;
    top:0;
    bottom:0;
    width: 100%;
`;
export const TabItem = ({children, active=false, style={}, lazy=false, alwaysReload=false}) => {
    const [load, setLoad] = useState(lazy ? false : true);
    const activeStyle = active ? {right:0} : {right:-Util.getScreenWidth()};
    let render = load;
    if(alwaysReload && !active) render = false;

    useEffect(() => {
        if(active && !load) {
            setLoad(true);
        }
    }, [active]);
    return (
        render && <TabItemContainer style={{...activeStyle, ...style}}>{children}</TabItemContainer>
    )
}
