import React, { useState } from "react";
import classNames from "classnames";
import { useConfig } from "../_util/config-context";
import { Modal } from "../modal";
import { Justify } from "../justify";
import { Button } from "../button";
import { StyledProps } from "../_type";
import { useTranslation } from "../i18n";
import { callBoth } from "../util";

export interface VideoProps extends StyledProps {
  /**
   * 视频地址
   *
   * *请填写**腾讯云大学**视频地址*
   */
  src?: string;

  /**
   * 自定义弹窗内容，优先级低于src
   */
  content?: React.ReactNode;

  /**
   * 弹窗标题
   */
  title?: string;

  /**
   * 被包裹内容
   */
  children: React.ReactNode;
}

/**
 * 图片预览
 */
export const Video = React.forwardRef(function Video(
  props: VideoProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const t = useTranslation();
  const { src, content, children, title, className, style = {}, ...restProps } = props;
  const [visible, setVisible] = useState(false);

  return (
    <>
      <div
        ref={ref}
        className={classNames(`${classPrefix}-video`, className)}
        style={{ cursor: "pointer", ...style }}
        {...restProps}
        onClick={callBoth(() => setVisible(true), (restProps as any).onClick)}
      >
        {children}
      </div>
      <Modal
        disableCloseIcon
        className={`${classPrefix}-dialog--img`}
        visible={visible}
        onClose={() => setVisible(false)}
        onExited={() => setVisible(false)}
      >
        <div className={`${classPrefix}-dialog__header`}>
          <Justify
            left={
              <h3 className={`${classPrefix}-dialog__headertitle`}>{title}</h3>
            }
            right={
              <Button
                type="icon"
                icon="close"
                htmlType="button"
                onClick={() => setVisible(false)}
                aria-label={t.closeText}
              />
            }
          />
        </div>
        <Modal.Body style={{ marginTop: 0 }}>
          {
            src &&
            <iframe
              allowFullScreen
              src={src}
              width={700}
              height={500}
              title={title}
              style={{ backgroundColor: "#000" }}
            />
          }
          {!src && content}
        </Modal.Body>
      </Modal>
    </>
  );
});

Video.displayName = "Video";