import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './index.less';
import Tabs from './Tabs';
const { RangePicker } = DatePicker;
const TopSarch = ({
  onChange,
  items,
  defaultKey,
}: {
  onChange: (val: any) => void;
  items?: any[];
  defaultKey?: string;
}) => {
  const [active, setActive] = useState(defaultKey);
  const [dateVal, setDateVal] = useState();
  return (
    <div className={styles.container}>
      <Tabs
        active={active}
        setActive={setActive}
        style={{
          background: 'transparent',
          height: '30px',
        }}
        itemStyle={{
          borderRadius: '25px',
          background: 'rgba(7, 50, 93, 0.8)',
          fontSize: '16px',
          marginLeft: 8,
        }}
        onChange={(e) => {
          setDateVal(null);
          if (e === 'day') {
            onChange({
              key: 'day',
              startTime: dayjs().format('YYYY-MM-DD'),
              endTime: dayjs().format('YYYY-MM-DD'),
            });
          }
          if (e === 'month') {
            onChange({
              key: 'month',
              startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
              endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
            });
          }
          if (e === 'year') {
            onChange({
              key: 'year',
              startTime: dayjs().startOf('year').format('YYYY-MM-DD'),
              endTime: dayjs().endOf('year').format('YYYY-MM-DD'),
            });
          }
        }}
        itemkey={'key'}
        items={
          items || [
            {
              key: 'day',
              label: '今日',
            },
            {
              key: 'month',
              label: '本月',
            },
            {
              key: 'year',
              label: '本年',
            },
          ]
        }
      />
      <div className={styles.rangWarp}>
        <RangePicker
          value={dateVal}
          format="YYYY-MM-DD"
          showTime={false}
          onChange={(e) => {
            console.log(e);
            setDateVal(e);
            setActive;
            if (e?.length) {
              setActive('section');
              onChange({
                key: 'section',
                startTime: e[0]?.format('YYYY-MM-DD'),
                endTime: e[1]?.format('YYYY-MM-DD'),
              });
            }
          }}
        />
      </div>
    </div>
  );
};

export default TopSarch;
