import React, { useEffect, useState } from 'react';
import style from './index.less';
import classnames from 'classnames';

interface tabsType {
  type: 'line' | 'card' | 'editable-card';
  activeKey: string | number;
  onChange?: (key: any) => any;
  children: any;
}

interface tabPaneType {
  tab: string;
  children: any;
}

function Tabs({ activeKey, onChange, children }: tabsType) {
  const [localActiveKey, setLocalActiveKey] = useState<string | number>(activeKey);

  useEffect(() => {
    setLocalActiveKey(activeKey);
  }, [activeKey]);

  return (
    <div className={style.easyvTabsNavBox}>
      <div className={style.easyvTabsNav}>
        {/* header */}
        <div className={style.easyvTabsNavWrap}>
          <div className={style.easyvTabsNavList}>
            {children &&
              children.map((e) => {
                if (!e) return null;
                const isActive = localActiveKey === e.key;
                return (
                  <div
                    key={e.key}
                    onClick={() => {
                      onChange && onChange(e.key);
                      setLocalActiveKey(e.key);
                    }}
                    className={classnames(isActive && style.tabActiveNavItem, style.tabPaneTitle, style.easyvTabTab)}>
                    <span>{e.props.tab}</span>
                  </div>
                );
              })}
          </div>
        </div>
      </div>
      <div className={style.easyvTabsContentHolder}>
        {children &&
          children.map((e: any) => {
            if (!e) return null;
            const isActive = localActiveKey === e.key;
            return (
              <div key={e.key} style={{ display: isActive ? 'block' : 'none' }} className={classnames(style.tabsNavItem)}>
                {e}
              </div>
            );
          })}
      </div>
    </div>
  );
}

Tabs.TabPane = function TabPane({ children }: tabPaneType) {
  return (
    <div>
      <div className={style.tabPaneChildren}>{children}</div>
    </div>
  );
};

export default Tabs;
