import { Flex } from 'antd';
import classNames from 'classnames';
import React, { useState } from 'react';
import List from '../List';
import styles from './index.less';

const BottomTab: React.FC = () => {
  const [largeClass, setLargeClass] = useState('today');
  const [smallClass, setSmallClass] = useState('type1');
  const largeTabs = [
    {
      key: 'today',
      name: '高发类型',
    },
    {
      key: 'week',
      name: '高发时段',
    },
    {
      key: 'month',
      name: '来源分布',
    },
  ];
  const smallTabs = [
    {
      key: 'type1',
      name: '大类',
    },
    {
      key: 'type2',
      name: '小类',
    },
    {
      key: 'type3',
      name: '细类',
    },
  ];
  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center">
        <div className={styles.tabBtnGroup}>
          {largeTabs.map((item, index) => {
            return (
              <div
                key={item.key}
                onClick={() => {
                  setLargeClass(item.key as any);
                }}
                className={classNames(
                  styles.tabBtn,
                  largeClass === item.key ? styles.tabBtnSelected : undefined,
                )}
              >
                {item.name}
              </div>
            );
          })}
        </div>

        <div className={styles.btnGroup}>
          {smallTabs.map((item, index) => {
            return (
              <div
                key={item.key}
                onClick={() => {
                  setSmallClass(item.key as any);
                }}
                className={classNames(
                  styles.btn,
                  smallClass === item.key ? styles.btnSelected : undefined,
                )}
              >
                {item.name}
              </div>
            );
          })}
        </div>
      </Flex>

      {largeClass === 'today' ? <List></List> : null}
    </div>
  );
};

export default BottomTab;
