import {FC} from 'react';
import css from './index.module.css';
import Header from './header';
import platformIcon from '@assets/images/screen/platform.webp';
import ChartsGroup from './chart';
import Group from './group';
import List from './list';
import {useQueryList} from './hooks';
import {ChildrenFC} from '@utils';
import {context, useContextState} from './context';

const ScreenProvider: ChildrenFC = function ({children}) {
  const {Provider} = context;
  const state = useContextState();

  return <Provider value={state}>{children}</Provider>;
};

const Screen: FC = function () {
  useQueryList();

  return (
    <main className={css.main}>
      <Header />

      <section className={css.content}>
        <ul className={css.aside}>
          <li>
            <img src={platformIcon} />
            <span>物料平台</span>
          </li>
        </ul>
        <div className={css.list}>
          <Group />
          <List />
        </div>
        <div className={css.chartGroup}>
          <ChartsGroup />
        </div>
      </section>
    </main>
  );
};

export default function ScreenPage() {
  return (
    <ScreenProvider>
      <Screen />
    </ScreenProvider>
  );
}
