import classNames from 'classnames';
import React from 'react';
import styles from './style.less';
import ContentSet from './ContentSet';
import PortalSet from './PortalSet';
import { Tabs } from '@easyv/antd';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from 'models';
import { SpaceShipState } from 'models/spaceship.types';
import { dispatchUpdateEditPageCurrentTab } from 'models/spaceship';

const tabConfig = [
  { title: '门户设置', key: '0' },
  { title: '内容设置', key: '1' },
];

const { TabPane } = Tabs;

const ConfigSidebar = () => {
  const screenDetail = useSelector<RootState>(
    (state) => state.screenDetail,
  ) as RootState['screenDetail'];
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { editPageCurrentTab = '0' } = spaceShip;
  const dispatch = useDispatch();
  const { loading, id } = screenDetail;
  const renderTabBar = (props) => {
    return (
      <div className={styles.tab}>
        {tabConfig.map((item) => (
          <div
            key={item.key}
            onClick={() => {
              dispatch(dispatchUpdateEditPageCurrentTab(item.key as '0' | '1'));
            }}
            className={classNames({ [styles.selectedTab]: item.key === props.activeKey })}>
            {item.title}
          </div>
        ))}
      </div>
    );
  };
  return (
    <div className={classNames(styles.configSidebar, { [styles.loading]: loading && id })}>
      <div className={loading && id ? styles.disabled : ''}>
        <Tabs
          destroyInactiveTabPane={true}
          activeKey={editPageCurrentTab}
          renderTabBar={renderTabBar}>
          <TabPane key="0">
            <div className={styles.configContent}>
              <PortalSet />
            </div>
          </TabPane>
          <TabPane key="1">
            <div className={styles.configContent} id="space-ship-config-content">
              <ContentSet />
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};

export default ConfigSidebar;
