import { ReactNode, useMemo, useState } from 'react';
import { Flex } from 'antd';
import TotalCard from './TotalCard'
import styles from './index.less'
import classNames from 'classnames';
import TypeDistribution from './TypeDistribution';
import HighIncidenceTime from './HighIncidenceTime';
import AreaDistribution from './AreaDistribution';
import Tabs from '@/components/Tabs';

const ManageQualityAndEffect = () => {

  const [tabActive, setTabActive] = useState('1')

  const tabs = [
    {
      key: '1',
      label: '投诉类型分布',
    },
    {
      key: '2',
      label: '高发时间',
    },
    {
      key: '3',
      label: '区域分布'
    }
  ]

  // tabs内容
  const renderTabComp: ReactNode = useMemo(() => {
    let comp: any = {
      '1': <TypeDistribution />,
      '2': <HighIncidenceTime />,
      '3': <AreaDistribution />
    };
    return comp[tabActive];
  }, [tabActive]);

  const onChangeCategory = () => {

  }

  return (
    <Flex vertical gap={40} className={styles.wrap}>
      <TotalCard />
      <div className={styles.tabSection}>
        <Flex justify='space-between' align='center' style={{ marginBottom: 20 }}>
          <Flex gap={20}>
            {tabs.map((item) => (
              <div
                key={item.key}
                className={classNames(styles.tab, {
                  [styles.tabActive]: item.key === tabActive,
                })}
                onClick={() => setTabActive(item.key)}
              >
                {item.label}
              </div>
            ))}
          </Flex>
          {
            tabActive === '1' && (
              <Tabs
                style={{
                  background: 'transparent',
                  height: '30px'
                }}
                itemStyle={{
                  borderRadius: '25px',
                  background: 'rgba(7, 50, 93, 0.8)',
                  fontSize: '16px',
                  marginLeft: 8
                }}
                onChange={onChangeCategory}
                itemkey={'key'}
                items={[
                  {
                    key: 'mainClass',
                    label: '大类'
                  },
                  {
                    key: 'subClass',
                    label: '小类'
                  }
                ]}
              />
            )
          }

        </Flex>
        {renderTabComp}
      </div>
    </Flex>
  )
}

export default ManageQualityAndEffect;