import React, { useState } from 'react';
import { Form, Modal, Input, TimePicker, Button } from 'antd';

interface SubItem {
  time: string;
  title: string;
  description: string;
  cover?: string | null;
}

interface ModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (values: SubItem) => void;
}

const AddSubTimeLineItemModal: React.FC<ModalProps> = ({ visible, onCancel, onOk }) => {
  const [form] = Form.useForm();

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onOk(values);
    } catch (error) {
      console.error('表单校验失败:', error);
    }
  };

  return (
    <Modal
      open={visible}
      title="添加子时间点"
      onCancel={() => {
        form.resetFields();
        onCancel();
      }}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={handleOk}>
          确定
        </Button>,
      ]}
    >
      <Form form={form} layout="vertical" name="subTimeLineItemForm">
        <Form.Item label="时间（HH:mm）" name="time" rules={[{ required: true, message: '请输入时间' }]}>
          <Input placeholder="例如：14:30" />
        </Form.Item>

        <Form.Item label="子标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
          <Input placeholder="请输入子标题" />
        </Form.Item>

        <Form.Item label="子描述" name="description">
          <Input.TextArea rows={4} placeholder="请输入子时间点描述" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddSubTimeLineItemModal;
