import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Modal, Tabs } from 'antd';
import useSettings from '../vm-hooks/useSettings';
import closeImgDark from '../../image/close-dark.png';
import closeImg from '../../image/close.png';
import './style';

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 (
        <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
                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>
        </Modal>
    );
};

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;
