import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import TimeRange from '../time-range';
import { map, orderBy } from 'lodash';
import { Form, Select, Spin } from 'antd';
import { Input } from '@sensoro/sensoro-design';
import AlarmCard from '@sensoro/alarm/lib/components/alarm-card';
import moment from 'moment';
import useQuery from '../../hooks/use-query';
import List from '../list';
import { APP_TYPE } from '../../types';
import { EVENT_STATUS } from '../../config';
import {
  ALARM_CONFIRM_TYPE,
  getAlarmEventListConfig,
} from '../../config/alarm';

import useModel from '../../hooks/use-alarm-event';
import styles from './index.less';

const Option = Select.Option;
const { Search } = Input;
const preWeak = Date.now() - 6 * 24 * 60 * 60 * 1000;
const defaultStart = moment(preWeak)
  .startOf('day')
  .valueOf();
const defaultEnd = moment()
  .endOf('day')
  .valueOf();

export interface AlarmEventListProps {
  appType: APP_TYPE;
  className?: string;
  hiddenTypeFilter?: boolean;
  noLocation?: boolean;
  appName: string;
}

const AlarmEventList: React.FC<AlarmEventListProps> = props => {
  const { appType, appName, className, hiddenTypeFilter, noLocation } = props;
  const { params } = getAlarmEventListConfig(appType);
  const [startTime, setStartTime] = useState(defaultStart);
  const [endTime, setEndTime] = useState(defaultEnd);
  const [form] = Form.useForm();

  const {
    allIds,
    total,
    onValuesChange,
    onRefresh,
    onLoadMore,
    loading,
  } = useQuery(
    {
      startTime: defaultStart,
      endTime: defaultEnd,
      size: 12,
      ...params,
    },
    1,
    useModel,
  );

  const data = orderBy(allIds, ['createdTime'], ['desc']);

  const handleValuesChange = (changeValue, allValues) => {
    const type =
      allValues.type === 'testing' ? 'testing,system' : allValues.type;
    onValuesChange({ ...allValues, type });
  };
  useEffect(() => {
    onRefresh();
  }, []);

  return (
    <div className={classNames(styles.wrapper, className)}>
      <div className={styles.formWrapper}>
        <Form
          form={form}
          initialValues={{
            createdTime: [defaultStart, defaultEnd],
          }}
          onValuesChange={handleValuesChange}
        >
          <div className={styles.formItemWrapper}>
            <Form.Item name="createdTime">
              <TimeRange
                startTime={startTime}
                setStartTime={setStartTime}
                endTime={endTime}
                setEndTime={setEndTime}
              />
            </Form.Item>

            <div className={styles.rightFormWrapper}>
              <Form.Item name="search">
                <Search placeholder="请输入预警名称" style={{ width: 224 }} />
              </Form.Item>

              <Form.Item name="status">
                <Select
                  className={styles.typeSelect}
                  style={{ width: 135, marginLeft: 8 }}
                  placeholder="全部处理状态"
                  defaultValue=""
                >
                  <Option key="all" value="">
                    全部处理状态
                  </Option>
                  {map(EVENT_STATUS, val => (
                    <Option key={val.value} value={val.value}>
                      {val.label}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
              {!hiddenTypeFilter && (
                <Form.Item name="type">
                  <Select style={{ width: 135, marginLeft: 8 }} defaultValue="">
                    <Option key="all" value="">
                      全部确认结果
                    </Option>
                    {map(ALARM_CONFIRM_TYPE, val => (
                      <Option key={val.value} value={val.value}>
                        {val.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              )}
            </div>
          </div>
        </Form>
      </div>
      <Spin spinning={loading}>
        <List
          className={styles.container}
          total={total}
          onLoadMore={onLoadMore}
        >
          {data?.map(item => (
            <div className={styles.item} key={item?.id}>
              <AlarmCard
                key={item?.id}
                alarm={{ ...item }}
                noLocation={noLocation}
                appName={item?.rule?.name || appName}
              />
            </div>
          ))}
        </List>
      </Spin>
    </div>
  );
};

export default AlarmEventList;