import React, { useEffect, useState } from 'react';
import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
import { Form, Input, Select } from '@arco-design/web-react';

const { Option } = Select;


interface DurationType {
  hour: number;
  minute: number;
  second: number;
  time: number;
}

const WaitEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
  const hourOptions = Array.from({ length: 23 }, (_, i) => i);
  const minuteOptions = Array.from({ length: 59 }, (_, i) => i);
  const secondOptions = Array.from({ length: 59 }, (_, i) => i);
  const [duration, setDuration] = useState<DurationType>({
    hour: 0,
    minute: 0,
    second: 0,
    time: 0
  });

  useEffect(() => {
    if (nodeData?.component?.customDef) {
      const duration = nodeData.component.customDef.duration;
      setDuration({
        hour: Math.floor(duration / 3600),
        minute: Math.floor((duration % 3600) / 60),
        second: Math.floor(duration % 60),
        time: duration
      });
    }
  }, [nodeData]);

  const handleChangeDuration = (newDuration: DurationType) => {
    const time = (newDuration.hour || 0) * 60 * 60 + (newDuration.minute || 0) * 60 + (newDuration.second || 0);
    setDuration({
      ...newDuration,
      time
    });
    updateNodeData('component', {
      customDef: { duration: time },
      type: 'WAIT'
    });
  };

  return (
    <>
      <Form.Item label="节点别名">
        <Input
          value={nodeData.title || ''}
          onChange={(value) => updateNodeData('alias', value)}
        />
      </Form.Item>
      <Form.Item label="节点描述">
        <Input.TextArea
          value={nodeData.description || ''}
          onChange={(value) => updateNodeData('description', value)}
        />
      </Form.Item>
      <Form.Item label="等待时间">
        <div
          style={{ display: 'flex', alignItems: 'center' }}
        >
          <Select
            placeholder="小时"
            value={duration.hour || undefined}
            onChange={(value) => {
              const newDuration = { ...duration, hour: value };
              handleChangeDuration(newDuration);
            }}
          >
            {hourOptions.map((option) => (
              <Option key={option} value={option}>
                {option}
              </Option>
            ))}
          </Select>
          <div style={{ margin: '0 10px' }}>时</div>
          <Select
            placeholder="分钟"
            value={duration.minute || undefined}
            onChange={(value) => {
              const newDuration = { ...duration, minute: value };
              handleChangeDuration(newDuration);
            }}
          >
            {minuteOptions.map((option) => (
              <Option key={option} value={option}>
                {option}
              </Option>
            ))}
          </Select>
          <div style={{ margin: '0 10px' }}>分</div>
          <Select
            placeholder="秒"
            value={duration.second || undefined}
            onChange={(value) => {
              const newDuration = { ...duration, second: value };
              handleChangeDuration(newDuration);
            }}
          >
            {secondOptions.map((option) => (
              <Option key={option} value={option}>
                {option}
              </Option>
            ))}
          </Select>
          <div style={{ margin: '0 10px' }}>秒</div>
        </div>
      </Form.Item>
    </>
  );
};

export default WaitEditor;