import React, { useContext, useEffect, useRef, useState } from 'react';
import {
  ConfigProvider,
  Modal,
  Radio,
  Slider,
  InputNumber,
  Input,
  Button,
  Tabs,
  Select,
} from 'antd';
import classNames from 'classnames';
import { BasicChart } from '@wisdom-components/basicchart';
import moment from 'moment';
import LoadBox from '@wisdom-components/loadbox';
import './index.less';

const PredictionCurve = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('prediction-curve');

  const { width, deviceCode, sensors, deviceType, getContainer, title } = props;
  const [open, setOpen] = useState(false);
  const [spinning, setSpinning] = useState(false);
  const [sensitive, setSensitive] = useState(10); // 波动幅度
  const [options, setOptions] = useState({});
  const chartRef = useRef(null);

  // 确定
  const onOk = () => {
    props.onOk && props.onOk(123);
  };

  // 取消
  const onCancel = () => {
    setOpen(false);
    props.onCancel && props.onCancel();
  };

  // spin控制
  const changeSpin = (flag) => {
    setSpinning(flag);
  };

  const renderTitle = () => {
    return (
      <>
        <div className={classNames(`${prefixCls}-title`)}>
          <span className={classNames(`${prefixCls}-title-name`)}>预测算法预览</span>
          <div className={classNames(`${prefixCls}-title-operate`)}>
            <Button onClick={onCancel}>取消</Button>
            <Button type={'primary'} onClick={onOk}>
              确定
            </Button>
          </div>
        </div>
      </>
    );
  };

  useEffect(() => {
    const arrayData = new Array(24).fill([]);
    const option = {
      xAxis: {
        type: 'time',
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          formatter: (value) => {
            return moment(value).format('HH:mm');
          },
        },
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        name: '',
        show: true,
        interval: 1,
        max: 10,
        min: 0,
        position: 'left',
        alignTicks: true,
        axisLabel: {
          formatter: '{value}',
        },
      },
      series: [{
        type: 'line',
        name: sensors,
        smooth: true,
        areaStyle: {},
        data: arrayData.map((item, index) => {
          return [new Date(moment(moment(new Date()).format('YYYY-MM-DD 00:00:00')).subtract(-index, 'hour').format('YYYY-MM-DD HH:mm:ss')).getTime(), null];
        }),
      }],
    };
    setOptions(option);
  }, [open]);

  useEffect(() => {
    setOpen(props.open);
  }, [props.open]);

  return (
    <>
      <Modal
        closable={false}
        centered
        width={width || '1200px'}
        footer={null}
        open={open}
        visible={open}
        onOk={onOk}
        onCancel={onCancel}
        wrapClassName={classNames(`${prefixCls}`)}
        getContainer={getContainer || document.body}
        destroyOnClose={true}
      >
        <div className={classNames(`${prefixCls}-box`)}>
          {renderTitle()}
          <div className={classNames(`${prefixCls}-info`)}>
            <div className={classNames(`${prefixCls}-list`)}>
              <span>预测算法：</span>
              <Select
                defaultValue="滑动平均值"
                style={{
                  width: 120,
                }}
                onChange={() => { }}
                options={[
                  {
                    value: '滑动平均值',
                    label: '滑动平均值',
                  },
                ]}
              />
            </div>
            <div className={classNames(`${prefixCls}-list`)}>
              <span>预测模型：</span>
              <Select
                defaultValue="M1"
                style={{
                  width: 120,
                }}
                onChange={() => { }}
                options={[
                  {
                    value: 'M1',
                    label: 'M1',
                  },
                ]}
              />
            </div>
            <div className={classNames(`${prefixCls}-list`)}>
              <span>预测准确度(参考)：</span>
              <span>{97}%</span>
            </div>
          </div>
          <div className={classNames(`${prefixCls}-info`)}>
            允许波动幅度：
            <Slider
              min={0}
              max={100}
              style={{ width: '100px' }}
              onChange={(value) => {
                setSensitive(value);
              }}
              value={typeof sensitive === 'number' ? sensitive : 0}
            />
            <InputNumber
              min={1}
              max={100}
              style={{
                margin: '0 16px',
                width: '100px',
              }}
              formatter={(value) => `${value}%`}
              value={sensitive}
              onChange={(value) => {
                setSensitive(value);
              }}
            />
          </div>
          <div className={classNames(`${prefixCls}-chart`)}>
            <BasicChart
              ref={chartRef}
              option={options}
              notMerge
              style={{ width: '100%', height: '100%' }}
            />
          </div>
          {spinning && (
            <div className={classNames(`${prefixCls}-load`)}>
              <LoadBox spinning={spinning} />
            </div>
          )}
        </div>
      </Modal>
    </>
  );
};

export default PredictionCurve;
