import React, { useMemo, useState, useEffect } from 'react';
import LayoutBox from '../themeComponents/ContentBox/TwoColumnBox';
import AppLayout from '../themeComponents/Layout';
import ThemeHeader from './components/Header';
import Dicts from './config';
import { cache } from '@zenview/micro-utils';
import './index.less';

const defaultKey = cache.getCache('defaultContentKey');

export default function ThemeDoc(props) {
  const [selectKey, setSelectKey] = useState(defaultKey || Dicts[0].name);
  const Content = useMemo(() => Dicts.find(v => v.name === selectKey)?.Component || (() => null), [selectKey]);
  useEffect(() => cache.setCache('defaultContentKey', selectKey), [selectKey]);
  return (
    <AppLayout header={<ThemeHeader />}>
      <LayoutBox
        leftContent={
          <ul className="theme-contents-list-box">
            {Dicts.map(item => (
              <li className={`${selectKey === item.name ? 'active' : ''}`} key={item.name} onClick={() => setSelectKey(item.name)}>
                <span>{item.title}</span>
                <span>{item.name}</span>
              </li>
            ))}
          </ul>
        }
      >
        <Content {...props} />
      </LayoutBox>
    </AppLayout>
  );
}
