import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import {
  Checkbox,
  Input,
  Button,
  Card,
  InputNumber,
  Form,
  Radio,
  DatePicker,
  Switch,
  Select,
  message,
} from 'antd';
import HourOfDaySelect from './HourOfDaySelect';
import DayOfWeekSelect from './DayOfWeekSelect';
import styles from './VisibleIISAgentConfig.less';
import moment from 'moment';
import { tr } from 'voca';
import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons';
const { Item } = Form;

const { TextArea } = Input;
let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' };
const hours = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期天',
};
const VisibleIISAgentConfig = (props, ref) => {
  const [loading, setLoading] = useState(false);
  const [previewVisible, setPreviewVisible] = useState(false);
  const [selectRole, setSelectRole] = useState([]);
  const [isReentrant, setIsReentrant] = useState(false);
  const [postCheck, setPostCheck] = useState(false);
  const [reenCheck, setReenCheck] = useState(false);
  const [logCheck, setLogCheck] = useState(false);
  const [isEndTimeShow, setIsEndTimeShow] = useState(false);
  const [isLoopShow, setIsLoopShow] = useState(false);
  const [isDayLoopShow, setIsDayLoopShow] = useState(false);
  const [isWeekLoopShow, setIsWeekLoopShow] = useState(false);
  const [waitCheck, setWaitCheck] = useState(false);
  const [isUse, setIsUse] = useState(true);
  const [interval, setInterval] = useState(1);
  const [loop_unit, setLoop_unit] = useState('Hour');
  const [exeType, setExeType] = useState(true);
  const [isType, setIsType] = useState('重复执行');
  const [isTypeValue, setIsTypeValue] = useState('ByLoop');
  const [time_out, setTime_out] = useState(30);
  const [weekData, setWeekData] = useState([]);
  const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00'));
  const [selectValues, setSelectValues] = useState([]);
  const [form] = Form.useForm();
  const dateFormat = 'YYYY-MM-DD HH:mm:ss';
  const { agentConfig, value, onIISAgentSubmit } = props;
  useImperativeHandle(ref, () => ({
    setPreviewVisible,
  }));
  useEffect(() => {
    if (agentConfig) {
      let startTime =
        agentConfig.LoopMode === 'ByOnce'
          ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days')
          : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00');
      form.setFieldsValue({
        is_enable: agentConfig.Enabled,
        url_type: agentConfig.Absolute ? true : false,
        url_path: agentConfig.Url,
        request_header: agentConfig.CustomHeader,
        plan_type: agentConfig.LoopMode,
        start_time: agentConfig.StartFrom ? moment(agentConfig.StartFrom, dateFormat) : startTime,
        end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : null,
        loop_mode: agentConfig.LoopMode,
        interval: agentConfig.Interval,
        loop_unit: agentConfig.LoopUnit,
        hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(','),
        day_of_week: agentConfig.DayOfWeek,
        time_out: agentConfig.Timeout || 30,
        post_state: agentConfig.UsePostState,
        reentrant: agentConfig.AllowReentrant,
        enable_log: agentConfig.AllowLog,
      });
      let startTimeValue =
        agentConfig.LoopMode === 'ByOnce'
          ? moment()
              .add(1, 'days')
              .format('YYYY-MM-DD 00:00:00')
          : moment().format('YYYY-MM-DD 00:00:00');
      setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue);
      setIsUse(agentConfig.Enabled);
      changeLoopMode(agentConfig.LoopMode);
      setReenCheck(agentConfig.AllowReentrant);
      setPostCheck(agentConfig.UsePostState);
      setLogCheck(agentConfig.AllowLog);
      setInterval(agentConfig.Interval);
      setLoop_unit(agentConfig.LoopUnit);
      setWaitCheck(agentConfig.UseTimeout || false);
      setTime_out(agentConfig.Timeout);
      if (agentConfig.LoopMode === 'ByOnce') {
        setIsType('执行一次');
        form.setFieldsValue({
          type: '执行一次',
        });
        setExeType(false);
      } else {
        setIsType('重复执行');
        form.setFieldsValue({
          type: '重复执行',
        });
        if (agentConfig.LoopMode === 'ByDay') {
          setSelectValues(agentConfig.HourOfDay.split(','));
        } else if (agentConfig.LoopMode === 'ByWeek') {
          setWeekData(agentConfig.DayOfWeek.split(','));
        }
        setExeType(true);
      }
    } else {
      form.setFieldsValue({
        type: '重复执行',
        url_type: false,
        loop_mode: 'ByLoop',
        start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
      });
      setExeTime(moment().format('YYYY-MM-DD 00:00:00'));
      setIsType('重复执行');
      changeLoopMode('ByLoop');
      setIsUse(true);
      setInterval(1);
      setLoop_unit('Hour');
    }
  }, [agentConfig]);

  useEffect(() => {
    if (value) {
      form.setFieldsValue({
        name: value,
      });
      setSelectRole(props.value);
    }
  }, [props]);
  const handleCancel = () => {
    setPreviewVisible(false);
  };
  const handleOk = async () => {
    let fv = form.getFieldValue();
    if (
      (fv.loop_mode === 'ByDay' && !selectValues.length) ||
      (fv.loop_mode === 'ByWeek' && !weekData.length)
    ) {
      message.warning('请选择计划执行日');
      return false;
    }
    let data = {
      Url: fv.url_path,
      CustomHeader: fv.request_header || '',
      StartFrom: fv.start_time && fv.start_time.format(dateFormat),
      EndAt: fv.end_time && fv.end_time.format(dateFormat),
      LoopMode: fv.loop_mode === 'ByOnce' ? 'ByLoop' : fv.loop_mode,
      LoopUnit: loop_unit,
      MonthOfYear: null,
      WeekOfMonth: null,
      DayOfWeek: fv.day_of_week ? fv.day_of_week.toString() : '',
      DayOfMonth: null,
      HourOfDay: fv.hour_of_day && fv.hour_of_day.toString(),
      Interval: interval.toString(),
      UsePostState: fv.post_state,
      AllowReentrant: fv.reentrant,
      AllowLog: fv.enable_log,
      Enabled: isUse,
      Timeout: fv.time_out ? parseInt(fv.time_out) : 30,
      Absolute: fv.url_type,
      SiteInfo: null,
      Name: fv.name,
      Tolerate: null,
      UseTimeout: waitCheck,
    };
    fv.time_out ? (data.MillisecondsTimeout = parseInt(fv.time_out)) : '';
    setPreviewVisible(false);
    (await onIISAgentSubmit) && onIISAgentSubmit(data);
  };
  const handleClick = () => {
    if (value) {
      setPreviewVisible(true);
    } else {
      message.error('请先输入方案名称!');
    }
  };
  const onPostChange = value => {
    setIsReentrant(value);
    setPostCheck(value);
    form.setFieldsValue({
      post_state: value,
    });
  };
  const onReenChange = value => {
    setReenCheck(value);
    form.setFieldsValue({
      reentrant: value,
    });
  };
  const onLogChange = value => {
    setLogCheck(value);
    form.setFieldsValue({
      enable_log: value,
    });
  };

  const changeLoopMode = value => {
    setIsTypeValue(value);
    switch (value) {
      case 'ByOnce':
        setIsEndTimeShow(false);
        setIsLoopShow(true);
        setIsWeekLoopShow(false);
        setIsDayLoopShow(false);
        break;
      case 'ByLoop':
        setIsEndTimeShow(true);
        setIsLoopShow(true);
        setIsWeekLoopShow(false);
        setIsDayLoopShow(false);
        break;
      case 'ByDay':
        setIsEndTimeShow(true);
        setIsLoopShow(false);
        setIsWeekLoopShow(false);
        setIsDayLoopShow(true);
        break;
      case 'ByWeek':
        setIsEndTimeShow(true);
        setIsLoopShow(false);
        setIsWeekLoopShow(true);
        setIsDayLoopShow(true);
        break;
    }
  };
  const onLoopModeChange = e => {
    changeLoopMode(e.target.value);
    if (e.target.value === 'ByLoop') {
      form.setFieldsValue({
        hour_of_day: '',
        day_of_week: '',
      });
    }
  };
  const onChange = value => {
    setIsUse(value);
  };
  const handleExe = e => {
    let obj = form.getFieldValue();
    let value = e.target.value;
    setIsType(value);
    if (value === '执行一次') {
      changeLoopMode('ByOnce');
      setLoop_unit('Second');
      form.setFieldsValue({
        loop_mode: 'ByOnce',
        hour_of_day: '',
        day_of_week: '',
        end_time: obj.start_time,
      });
      if (!agentConfig) {
        form.setFieldsValue({
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(
            1,
            'days',
          ),
          end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(
            1,
            'days',
          ),
        });
        setExeTime(
          moment()
            .add(1, 'days')
            .format('YYYY-MM-DD 00:00:00'),
        );
      }
      setExeType(false);
    } else {
      changeLoopMode('ByLoop');
      setExeType(true);
      form.setFieldsValue({
        loop_mode: 'ByLoop',
        end_time: '',
      });
      if (!agentConfig) {
        form.setFieldsValue({
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
          hour_of_day: '',
          day_of_week: '',
        });
        setExeTime(moment().format('YYYY-MM-DD 00:00:00'));
      }
    }
  };
  const onWait = e => {
    setWaitCheck(e);
  };
  const changeUnit = e => {
    setLoop_unit(e);
  };
  const changeInterval = e => {
    setInterval(e);
  };
  const InputTimeOut = e => {
    setTime_out(e);
  };
  const changeStartTime = e => {
    const time = moment(e).format('YYYY-MM-DD HH:mm:ss');
    setExeTime(time);
    let obj = form.getFieldValue();
    if (obj.loop_mode === 'ByOnce') setLoop_unit('Second');
    console.log(time, 'time');
    // form.setFieldsValue({
    //   end_time: time,
    // });
  };
  const changeDay = data => {
    console.log('data', data);
    if (data) setSelectValues(data);
  };
  const changeWeek = data => {
    if (data) setWeekData(data);
  };
  return (
    <div className={styles.agent_container}>
      {/* <Input value={selectRole} disabled={true} />
      <div className={styles.select_btn} onClick={handleClick}>
        <EditOutlined style={{ fontSize: '18px' }} />
      </div> */}
      <SiteModal
        {...props}
        title="编辑定时任务"
        bodyStyle={{ width: '100%', minHeight: '100px' }}
        style={{ top: 100, borderRadius: '20px' }}
        width="800px"
        destroyOnClose
        cancelText="取消"
        okText="确认"
        forceRender
        visible={previewVisible}
        onOk={() => handleOk()}
        confirmLoading={loading}
        onCancel={handleCancel}
      >
        <div className={styles.IISAgent_container}>
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
            <Item label="计划名称" name="name">
              <Input placeholder="请输入计划名称" disabled={true} />
            </Item>

            <Item label="URL路径">
              <Item label="" name="url_type" style={{ marginBottom: '0.2rem' }}>
                <Radio.Group>
                  <Radio value={false}>相对路径(便于配置迁移)</Radio>
                  <Radio value={true}>绝对路径(用于外链)</Radio>
                </Radio.Group>
              </Item>
              <Item label="" name="url_path" style={{ marginBottom: '0' }}>
                <TextArea rows={3} placeholder="请输入URL名称" />
              </Item>
            </Item>

            <Item label="请求头" name="request_header">
              <Input placeholder="请求头,选填" />
            </Item>
            <Item label="计划类型" name="type">
              <Radio.Group onChange={handleExe}>
                <Radio.Button value="重复执行">重复执行</Radio.Button>
                <Radio.Button value="执行一次">执行一次</Radio.Button>
              </Radio.Group>
            </Item>
            {exeType && (
              <Item label="执行方式" name="loop_mode">
                <Radio.Group onChange={onLoopModeChange}>
                  <Radio value={'ByLoop'}>循环</Radio>
                  <Radio value={'ByDay'}>每天</Radio>
                  <Radio value={'ByWeek'}>每周</Radio>
                </Radio.Group>
              </Item>
            )}
            <Item label="开始时间" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}>
              <div style={{ display: 'flex' }}>
                <Item label="" name="start_time" style={{ marginRight: '1rem' }}>
                  <DatePicker showTime onChange={changeStartTime} />
                </Item>
                {isEndTimeShow && (
                  <Item label="结束时间" name="end_time">
                    <DatePicker showTime />
                  </Item>
                )}
              </div>
            </Item>

            {isLoopShow && isType === '重复执行' && (
              <Card style={{ width: 600, margin: '0 0 1rem 3.6rem', height: '8rem' }}>
                <div className={styles.loopShow}>
                  <span> 每</span>
                  <InputNumber
                    min={0}
                    value={interval}
                    style={{ margin: '0 0.5rem' }}
                    onChange={changeInterval}
                    placeholder="请输入循环周期"
                  />
                  <Select
                    value={loop_unit}
                    onChange={changeUnit}
                    style={{ width: '8rem', margin: '0 0.5rem' }}
                  >
                    <Select.Option value="Hour">小时</Select.Option>
                    <Select.Option value="Minute">分钟</Select.Option>
                    <Select.Option value="Second">秒</Select.Option>
                  </Select>
                  <span> 执行一次</span>
                </div>
              </Card>
            )}
            {isDayLoopShow && (
              <Item label="日循环" name="hour_of_day">
                <HourOfDaySelect changeDay={changeDay} />
              </Item>
            )}
            {isWeekLoopShow && (
              <Item label="周循环" name="day_of_week">
                <DayOfWeekSelect changeWeek={changeWeek} />
              </Item>
            )}
            {isTypeValue === 'ByDay'
              ? !selectValues.length && (
                  <span style={{ color: '#f00' }} className={styles.exeTime}>
                    <InfoCircleOutlined style={{ marginRight: '0.2rem' }} />
                    必须选择计划执行时刻
                  </span>
                )
              : ''}

            {isTypeValue === 'ByWeek'
              ? !weekData.length && (
                  <span style={{ color: '#f00' }} className={styles.exeTime}>
                    <InfoCircleOutlined style={{ marginRight: '0.2rem' }} />
                    必须选择计划执行时刻
                  </span>
                )
              : ''}
            <Item label="说明">
              <div style={{ color: '#909EB6FF', fontSize: '12px' }}>
                {isType === '执行一次' && <span>在{exeTime}执行一次</span>}
                {isType === '重复执行' && isTypeValue === 'ByDay' && (
                  <span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}>
                    从{exeTime}开始{selectValues.length ? ',在每天' : ''}
                    {selectValues.length
                      ? selectValues.map((item, index) => {
                          return item.length > 1
                            ? `${item}:00${index == selectValues.length - 1 ? '' : ','}`
                            : `0${item}:00${index == selectValues.length - 1 ? '' : ','}`;
                        })
                      : ''}
                    {selectValues.length ? '执行' : ''}
                  </span>
                )}
                {isType === '重复执行' && isTypeValue === 'ByWeek' && (
                  <span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}>
                    从{exeTime}开始{weekData.length ? ',在每周' : ''}
                    {weekData.length
                      ? weekData.map((item, index) => {
                          return `${hours[item]}${index == weekData.length - 1 ? '' : ','}`;
                        })
                      : ''}
                    {weekData.length && selectValues.length
                      ? selectValues.map((item, index) => {
                          return item.length > 1
                            ? `${item}:00${index == selectValues.length - 1 ? '' : ','}`
                            : `0${item}:00${index == selectValues.length - 1 ? '' : ','}`;
                        })
                      : ''}{' '}
                    {weekData.length ? '执行' : ''}
                  </span>
                )}
                {isType === '重复执行' && isTypeValue === 'ByLoop' && (
                  <span style={{ color: '#909EB6FF' }}>
                    从{exeTime}开始,每{interval}
                    {unitType[loop_unit]}执行一次。
                  </span>
                )}
              </div>
            </Item>
            <Item label="其他设置" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}>
              {' '}
              <div style={{ display: 'flex' }}>
                <div style={{ display: 'flex' }}>
                  <Item name="wait" style={{ marginRight: '0.5rem' }}>
                    <Switch
                      checkedChildren="开启"
                      unCheckedChildren="关闭"
                      onChange={onWait}
                      checked={waitCheck}
                    />
                  </Item>
                  <div style={{ paddingTop: '0.3rem' }}>请求等待时间(单位:秒)</div>
                </div>

                {waitCheck && (
                  <Item name="time_out">
                    <div>
                      <InputNumber value={time_out} onChange={InputTimeOut} />
                    </div>
                  </Item>
                )}
              </div>
            </Item>
            <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
              {' '}
              <div style={{ display: 'flex' }}>
                <Item name="post_state" style={{ marginRight: '0.5rem' }}>
                  <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    onChange={onPostChange}
                    checked={postCheck}
                  />
                </Item>
                <div style={{ paddingTop: '0.3rem' }}>
                  使用POST维持状态(上一次返回结果传入下一次请求)
                </div>
              </div>
            </Item>
            <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
              <div style={{ display: 'flex' }}>
                <Item style={{ marginRight: '0.5rem' }} name="reentrant">
                  <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    onChange={onReenChange}
                    disabled={isReentrant}
                    checked={reenCheck}
                  />
                </Item>
                <div style={{ paddingTop: '0.3rem' }}>
                  允许重入(上一次未执行完,也会执行下一次请求)
                </div>
              </div>
            </Item>
            <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
              <div style={{ display: 'flex' }}>
                <Item name="enable_log" style={{ marginRight: '0.5rem' }}>
                  <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    onChange={onLogChange}
                    checked={logCheck}
                  />
                </Item>
                <div style={{ paddingTop: '0.3rem' }}>记录日志(小于每分钟一次的请求不会记录)</div>
              </div>
            </Item>
            <Item label="禁用计划" style={{ color: '#f00' }} name="is_enable">
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                checked={isUse}
                onChange={onChange}
              />
            </Item>
          </Form>
        </div>
      </SiteModal>
    </div>
  );
};
export default forwardRef(VisibleIISAgentConfig);