import React, { useImperativeHandle, useRef, useState } from 'react';
import { Wrapper, TabBar, ContentArea, TabItem } from './style';
import { ITabs, ITabPanel } from './types';
import { usePrevious } from 'utils/hooks';
import Carousel from '../carousel';

export const Tabs = function(
    {
        defaultActiveIndex = 0,
        defaultActiveKey,
        tabsLocation = 'top',
        onChange,
        animation = true,
        showUnderLine = true,
        size = 'default',
        tabHeaderAlign,
        children,
        width,
        height,
        ...rest
    }: ITabs,
    imp: any
) {
    const [activeIndex, setActive] = useState(defaultActiveIndex);
    const ref: any = useRef();
    const titles = React.Children.map(children, element => {
        if (!React.isValidElement(element)) return;
        const { title } = element.props;
        return title;
    }).filter(Boolean);
    useImperativeHandle(
        imp,
        () => {
            return { setActive };
        },
        []
    );
    return (
        <Wrapper {...rest} tabsLocation={tabsLocation}>
            <TabBar tabsLocation={tabsLocation} size={size} className="kwai-tabBar" tabHeaderAlign={tabHeaderAlign}>
                {titles.map((title, index) => {
                    return (
                        <TabItem
                            key={index}
                            showUnderLine={showUnderLine}
                            tabHeaderAlign={tabHeaderAlign}
                            tabsLocation={tabsLocation}
                            className={index === activeIndex ? 'kwai-tabActive' : ''}
                            onClick={() => {
                                setActive(index);
                                animation && ref.current.set(index);
                                if (index !== activeIndex) {
                                    onChange &&
                                        onChange({
                                            index,
                                            title: titles[index],
                                            previousIndex: activeIndex,
                                            previousTitle: titles[activeIndex],
                                        });
                                }
                            }}
                        >
                            {title}
                        </TabItem>
                    );
                })}
            </TabBar>
            <ContentArea className="kwai-tabContent">
                {animation ? (
                    <Carousel autoplay={false} clickAble={false} ref={ref} width={width} height={height}>
                        {React.Children.map(children, e => e)}
                    </Carousel>
                ) : (
                    React.Children.map(children, (e, index) => {
                        return index === activeIndex && e;
                    }).filter(Boolean)
                )}
            </ContentArea>
        </Wrapper>
    );
};

export const TabPanel = function({ children, title, ...rest }: ITabPanel) {
    return <div {...rest}>{children}</div>;
};
Tabs.defaultProps = {
    tabsLocation: 'top',
    size: 'default',
} as const;
const forwardRefExoticComponent: any = React.forwardRef(Tabs);
forwardRefExoticComponent.TabPanel = TabPanel;
export default forwardRefExoticComponent;