import React, { useState } from 'react';
import TimeRangePicker from '../index';
import moment from 'moment';

const Demo = () => {
  const [dateValue, setDateValue] = useState(null);
  const [timeValue, setTimeValue] = useState(null);
  const [data, setData] = useState({ startDate: '', endDate: '' });
  const [time, setTime] = useState({ startTime: '', endTime: '' });

  const onDateChange = (key, data = []) => {
    let start = '',
      end = '';
    switch (key) {
      case 'all':
        break;
      case 'yesterday':
        start = moment().subtract(1, 'days').format(startFormat);
        end = moment().subtract(1, 'days').format(endFormat);
        break;
      case 'today':
        start = moment().format(startFormat);
        end = moment().format(endFormat);
        break;
      case 'thisWeek':
        start = moment().startOf('week').format(startFormat);
        end = moment().endOf('week').format(endFormat);
        break;
      case 'lastWeek':
        start = moment().startOf('week').subtract(1, 'week').format(startFormat);
        end = moment().endOf('week').subtract(1, 'week').format(endFormat);
        break;
      case 'thisMonth':
        start = moment().startOf('month').format(startFormat);
        end = moment().endOf('month').format(endFormat);
        break;
      case 'lastMonth':
        start = moment()
          .month(moment().month() - 1)
          .startOf('month')
          .format(startFormat);
        end = moment()
          .month(moment().month() - 1)
          .endOf('month')
          .format(endFormat);
        break;
      case 'thisYear':
        start = moment().startOf('year').format(startFormat);
        end = moment().endOf('year').format(endFormat);
        break;
      case 'lastYear':
        start = moment()
          .year(moment().year() - 1)
          .startOf('year')
          .format(startFormat);
        end = moment()
          .year(moment().year() - 1)
          .endOf('year')
          .format(endFormat);
        break;
      case 'customer':
        if (data && data.length > 0) {
          start = moment(data[0]).format(startFormat);
          end = moment(data[1]).format(endFormat);
        }
        break;
    }
    setDateValue(key);
    setData({ startDate: start, endDate: end });
  };

  const onTimeChange = (key, data = []) => {
    let start = '',
      end = '';
    switch (key) {
      case 'oneHour':
        start = moment().subtract(1, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'fourHour':
        start = moment().subtract(4, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'twelveHours':
        start = moment().subtract(12, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'roundClock':
        start = moment().subtract(24, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'yesterday':
        start = moment().subtract(1, 'days').format(startFormat);
        end = moment().subtract(1, 'days').format(endFormat);
        break;
      case 'customer':
        if (data && data.length > 0) {
          start = moment(data[0]).format(timeFormat);
          end = moment(data[1]).format(timeFormat);
        }
        break;
    }
    setTimeValue(key);
    setTime({ startTime: start, endTime: end });
  };

  return (
    <>
      <h3>horizontal</h3>
      <TimeRangePicker
        value={dateValue}
        onChange={onDateChange}
        defaultValue={dateList[0].key}
        dataSource={dateList}
        layout={'horizontal'}
      />
      <br />
      <h3>vertical</h3>
      <TimeRangePicker
        value={dateValue}
        onChange={onDateChange}
        defaultValue={dateList[0].key}
        dataSource={dateList}
        layout={'vertical'}
      />
      <br />
      <div>
        startDate:{data.startDate}
        <br />
        endDate:{data.endDate}
      </div>
      <br />
      <TimeRangePicker
        value={timeValue}
        onChange={onTimeChange}
        dataSource={timeList}
        timeProps={{ showTime: true }}
      />
      <br />
      <div>
        startTime:{time.startTime}
        <br />
        endTime:{time.endTime}
      </div>
    </>
  );
};

export default Demo;

const startFormat = 'YYYY-MM-DD 00:00:00';
const endFormat = 'YYYY-MM-DD 23:59:59';

const timeFormat = 'YYYY-MM-DD hh:mm:ss';

const dateList = [
  {
    key: 'all',
    name: '全部',
  },
  {
    key: 'yesterday',
    name: '昨天',
  },
  {
    key: 'today',
    name: '今天',
  },
  {
    key: 'thisWeek',
    name: '本周',
  },
  {
    key: 'lastWeek',
    name: '上周',
  },
  {
    key: 'thisMonth',
    name: '本月',
  },
  {
    key: 'lastMonth',
    name: '上月',
  },
  {
    key: 'thisYear',
    name: '今年',
  },
  {
    key: 'lastYear',
    name: '去年',
  },
  {
    key: 'customer',
    name: '自定义',
  },
];

const timeList = [
  {
    key: 'oneHour',
    name: '近1小时',
  },
  {
    key: 'fourHour',
    name: '近4小时',
  },
  {
    key: 'twelveHours',
    name: '近12小时',
  },
  {
    key: 'roundClock',
    name: '近24小时',
  },
  {
    key: 'yesterday',
    name: '昨天',
  },
  {
    key: 'customer',
    name: '自定义',
  },
];