import { useToggle } from 'ahooks';
import { Flex, message, Space } from 'antd';
import classNames from 'classnames';
import React from 'react';
import DistrictList from './components/DistrictList';
import DistrictMap from './components/Map';
import styles from './index.less';

/** @module 区市县运行情况 */
const TheOperationOfTheDistrictCityAndCounty: React.FC = () => {
  const [state, { toggle }] = useToggle('left', 'right');

  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.header}>
        <div>区(市)县运行情况</div>
        <Space align="center" size={24}>
          <div className={styles.header_right_text}>10:20 更新</div>
          <div className={styles.btnGroup}>
            <div
              onClick={toggle}
              className={classNames(
                styles.btn,
                state === 'left' ? styles.btnSelected : undefined,
              )}
            >
              实时态势
            </div>
            <div
              onClick={() => {
                message.warning('功能未开放');
              }}
              className={classNames(
                styles.btn,
                state === 'right' ? styles.btnSelected : undefined,
              )}
            >
              历史态势
            </div>
          </div>
        </Space>
      </Flex>
      <div className={styles.content}>
        <DistrictList />
        <DistrictMap/>
      </div>
    </div>
  );
};

export default TheOperationOfTheDistrictCityAndCounty;
