import { InboxOutlined } from "@ant-design/icons";
import { Col, Form, Input, message, Row, Upload, UploadProps } from "antd";
import { useEffect, useState } from "react";
import "./index.less";
const { Dragger } = Upload;

interface IProps {
  onChange: Function;
  styles?: React.CSSProperties;
}

const BasicForm = (props: IProps) => {
  const [preview, setPreivew] = useState({
    course_cover_url: "",
    course_title: "",
    course_summary: "",
  });
  const [form] = Form.useForm();

  const onValuesChange = (_: any, all: any) =>
    setPreivew((p) => ({ ...p, ...all }));

  const coverDragger: UploadProps = {
    name: "file",
    multiple: true,
    action: "/api/vod/course/cover/upload",
    onChange(info) {
      const { status } = info.file;
      if (status !== "uploading") console.log(info.file, info.fileList);
      if (status === "done") {
        const { code, data } = info.file.response;
        if (code === 10000) {
          message.success(`${info.file.name} 文件上传成功`);
          const { MediaUrl } = data;
          setPreivew((p) => ({ ...p, course_cover_url: MediaUrl }));
        }
      } else if (status === "error") {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };

  useEffect(() => props.onChange(preview), [preview]);

  return (
    <div style={{ ...props.styles }}>
      <Row style={{ marginBottom: 24 }}>
        <Col span={24}>
          <div
            className="preview-course"
            style={{
              backgroundImage: !preview.course_cover_url
                ? `linear-gradient(
              to right,
              #e95659,
              #e15084,
              #c55aaa,
              #976bc4,
              #5678ce
            )`
                : `url(${preview.course_cover_url})`,
            }}
          >
            <div className="mask">
              <p className="title">
                {!preview.course_title ? "标题" : preview.course_title}
              </p>
              <p className="summary">
                {!preview.course_summary ? "摘要" : preview.course_summary}{" "}
              </p>
            </div>
          </div>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <Dragger {...coverDragger} maxCount={1}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">上传课程封面图</p>
            <p className="ant-upload-hint">点击或拖拽文件到此处</p>
          </Dragger>
        </Col>
        <Col span={12}>
          <Form form={form} onValuesChange={onValuesChange}>
            <Form.Item name="course_title" rules={[{ required: true }]}>
              <Input size="large" type="text" placeholder="标题" />
            </Form.Item>
            <Form.Item
              name="course_summary"
              rules={[{ required: true }]}
              style={{ marginBottom: 0 }}
            >
              <Input.TextArea
                placeholder="摘要"
                style={{ height: 130, resize: "none" }}
              />
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  );
};

export default BasicForm;