import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { ConfigProvider, Modal, Tabs } from 'antd';
import useSettings from '../vm-hooks/useSettings';
import closeImgDark from '../../image/close-dark3.png';
import closeImg from '../../image/close.png';
import './style';
import zhCN from 'antd/lib/locale/zh_CN';
const { TabPane } = Tabs;

const VtxBaseModal = props => {
    const {
        title,
        visible,
        width = 1332,
        onCancel,
        subTitle,
        contents,
        tabs,
        headerExt,
        onTabsChange,
        className,
    } = props;
    const [tabKey, setTabKey] = useState(tabs[0].key);
    const { theme } = useSettings();
    useEffect(() => {
        if (!visible) setTabKey(tabs[0].key);
    }, [visible]);
    useEffect(() => {
        document.body.classList.add(theme);
        return () => {
            document.body.classList.remove(theme);
        };
    }, []);
    return (
        <ConfigProvider locale={zhCN}>
            <Modal
                title={<ModalTitle title={title} subTitle={subTitle} headerExt={headerExt} />}
                visible={visible}
                onCancel={onCancel}
                width={width}
                footer={null}
                closeIcon={<CloseBtn />}
                wrapClassName={`vtx-business-modal-wrap ${theme}`}
                className={`vtx-business-modal ${className}`}
            >
                {tabs?.length > 1 ? (
                    <Tabs
                        activeKey={tabKey}
                        onChange={key => {
                            setTabKey(key);
                            onTabsChange && onTabsChange(key);
                        }}
                        tabPosition="right"
                        tabBarGutter={0}
                        className={`vtx-modal-tabs ${theme}`}
                    >
                        {tabs.map(item => (
                            <TabPane tab={item.value} key={item.key}>
                                {contents.find(i => i.key === item.key)?.content ||
                                    '页面内容未找到，请检查代码'}
                            </TabPane>
                        ))}
                    </Tabs>
                ) : (
                    contents?.[0]?.content
                )}
            </Modal>
        </ConfigProvider>
    );
};

VtxBaseModal.propTypes = {
    title: PropTypes.string,
    subTitle: PropTypes.string,
    width: PropTypes.number,
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    contents: PropTypes.array,
    tabs: PropTypes.array,
    headerExt: PropTypes.element,
    onTabsChange: PropTypes.string,
    className: PropTypes.string,
};

const ModalTitle = props => {
    const { title, subTitle, headerExt } = props;
    return (
        <div className="modal-title">
            <div className="title">{title}</div>
            {subTitle && <div className="sub-title">{`（${subTitle}）`}</div>}
            <div className="ext">{headerExt}</div>
        </div>
    );
};
ModalTitle.propTypes = {
    title: PropTypes.string,
    subTitle: PropTypes.string,
    headerExt: PropTypes.element,
};
const CloseBtn = () => {
    const { theme } = useSettings();
    return <img className="close-btn" src={theme === 'light' ? closeImg : closeImgDark} alt="" />;
};
export default VtxBaseModal;