import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';
import closeImgDark from './imgs/close-dark.png';
import closeImg from './imgs/close.png';
import useSettings from '../vm-hooks/useSettings';
import VtxThemeProvider from '../vtx-theme-provider';
import './style';

const CloseBtn = () => {
    const { theme } = useSettings();
    return <img className="close-btn" src={theme === 'light' ? closeImg : closeImgDark} alt="" />;
};

export interface TabContent {
    [content: string]: React.ReactNode;
}

export interface TabItem {
    key: string;
    value?: string;
    title?: string;
}

interface VtxBaseModalProps {
    title: string;
    subTitle?: string;
    visible: boolean;
    width?: number;
    height?: number;
    onCancel?: () => void;
    contents: TabContent;
    tabs: Array<TabItem>;
    onTabsChange?: (key: string | undefined) => void;
    theme?: 'light' | 'dark';
}

// 弹框内容最大高度：document高度-上下空80-弹框头高度
const MAX_CONTENT_HEIGHT = document.body.clientHeight - 160 - 60;
const VtxBaseModal: React.FC<VtxBaseModalProps> = props => {
    const contentRef = useRef<HTMLDivElement>(null);
    const [contentStyle, setContentStyle] = useState({});
    const {
        title,
        visible,
        width = 1478,
        onCancel,
        // subTitle,
        contents,
        tabs,
        // headerExt,
        onTabsChange,
        // className,
        theme = 'dark',
    } = props;
    const [tabKey, setTabKey] = useState(tabs[0].key);

    useEffect(() => {
        if (!visible) setTabKey(tabs[0].key);
    }, [visible]);

    useEffect(() => {
        document.body.classList.add(theme);
        return () => {
            document.body.classList.remove(theme);
        };
    }, []);

    useEffect(() => {
        const contentHeight = contentRef.current?.clientHeight || 0;
        if (contentHeight >= MAX_CONTENT_HEIGHT) {
            setContentStyle({
                maxHeight: MAX_CONTENT_HEIGHT,
                overflow: 'auto',
            });
        } else {
            setContentStyle({});
        }
    }, [contents[tabKey]]);

    return !visible ? null : (
        <VtxThemeProvider value={{ theme }}>
            <div className={`vtx-business-modal-wrap ${theme}`}>
                <div className="mask"></div>
                <div
                    className={`vtx-business-modal ${theme}`}
                    style={{
                        width: width,
                        // height: height,
                        transform: `translateX(${-width / 2}px)`,
                    }}
                >
                    <div className="vtx-business-modal--head">
                        <div className={`vtx-business-modal--head-title ${theme}`}>
                            <div className={`vtx-business-modal--head-title-bg ${theme}`} />
                            {title}
                        </div>
                        <div onClick={() => onCancel && onCancel()}>
                            <CloseBtn />
                        </div>
                    </div>
                    <div className={'vtx-business-modal--content'}>
                        <div
                            className={'vtx-business-modal--main'}
                            ref={contentRef}
                            style={contentStyle}
                        >
                            {contents[tabKey]}
                        </div>
                        <div className={`vtx-modal-tabs ${theme}`}>
                            {tabs.map((ele: TabItem, index: number) => (
                                <div
                                    key={index}
                                    className={classNames('vtx-modal-tabs--tab', {
                                        ['vtx-modal-tabs--tab_active']: tabKey === ele.key,
                                    })}
                                    onClick={() => {
                                        setTabKey(ele.key);
                                        onTabsChange?.(ele.key);
                                    }}
                                >
                                    {ele.title}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </VtxThemeProvider>
    );
};

export default VtxBaseModal;
