import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import theme from "@sc/components/ui/theme";
import _ from "lodash";
import React from "react";
import Loader from "react-loader-spinner";

import { VideoContent } from "./component";

import style from "./style";

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { TextInput } from "@sc/components/ui";

const VideoContentEdit = (props) => {
  const isUploading = _.get(props, "settings.isLoading", false);

  return (
    <EditorObject {...props} fitContent={false} PropertiesView={Properties}>
      <div
        style={{
          ...style.coverObject,
          background: isUploading ? "black" : "transparent",
          opacity: 0.4,
        }}
      ></div>
      {isUploading && (
        <div style={style.coverObject}>
          <Loader
            type="MutatingDots"
            color={theme.secondaryColor}
            height="100"
            width="100"
          />
          <h3
            style={{ background: "white", padding: 5, display: "inline-block" }}
          >
            Your Video is Uploading...
          </h3>
        </div>
      )}

      <VideoContent {...props} muted />
    </EditorObject>
  );
};

export default (props) => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";
  const height = "100%";

  return (
    <div style={{ marginTop, textAlign, height }}>
      <VideoContentEdit {...props} />
    </div>
  );
};

class BasicPropertiesTab extends React.Component {
  constructor(props) {
    super(props);

    this.showVideo = this.showVideo.bind(this);
  }

  showVideo(files) {
    const { updateComponentSettings, settings } = this.props;

    if (files.length) {
      const file = _.head(files);

      if (!_.has(file, "preview")) {
        Object.assign(file, { preview: URL.createObjectURL(file) });
      }

      console.log("prv", file.preview);

      updateComponentSettings(
        settings.id,
        {
          ...this.props.settings,
          isLoading: file.preview.indexOf("blob:") > -1,
          src: {
            mp4: file.preview,
          },
        },
        true,
        false
      );
    }
  }

  render() {
    const { settings, pageContent, updateComponentSettings } = this.props;

    return (
      <div style={{ width: "100%" }}>
        <Tools.UploadGroup
          text="Video"
          settings={settings}
          url={settings.src.mp4}
          accept="video/mp4"
          highlighted
          onChange={this.showVideo}
          isExpanded
          label="Upload A Different Video"
          pageContent={pageContent}
          updateComponentSettings={updateComponentSettings}
        />
        <Tools.WidthHeight
          label="Video Size"
          {...this.props}
          showHeight={false}
        />
        <Tools.Background
          {...this.props}
          accept="image/jpeg, image/png"
          showAlpha
          isExpanded={false}
          label="Video Thumbnail"
          hideTabs
          theActiveTab="image"
          showExtras={false}
        />
        <Tools.PositionPadding {...this.props} />
        <Tools.Alignment {...this.props} verticalAlign={false} textAlign />
        <Tools.Interactions
          label="Video Actions"
          {...this.props}
          behavior="playProgress"
          onUpdate={(action) => console.log(action)}
        >
          <fieldset
            style={{
              border: "1px solid #ccc",
              marginBottom: 20,
              padding: "10px 5px",
            }}
            title=""
          >
            <legend>Trigger this action after...</legend>
            <div
              style={{
                padding: "5px 10px",
                display: "flex",
                justifyContent: "space-between",
              }}
            >
              <TextInput
                style={{ marginTop: 10 }}
                value={_.get(settings, "triggerAfter", 0)}
                type="number"
                onBlur={(e) =>
                  // updateAction(action, { tagValue, tagName: e.target.value })
                  updateComponentSettings(settings.id, {
                    ...settings,
                    triggerAfter: Number(e.target.value),
                  })
                }
                focusOnMount
                focusOnClick
              />
              <span style={{ marginTop: 25 }}>seconds</span>
            </div>
          </fieldset>
        </Tools.Interactions>
      </div>
    );
  }
}

const AdvancedPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.BordersShadow {...props} isExpanded />
  </div>
);

const Properties = (props) => (
  <Tools.PropertiesWindow
    {...props}
    defaultTab="basic"
    tabs={[
      { id: "basic", title: "Video", component: BasicPropertiesTab },
      { id: "advanced", title: "Advanced", component: AdvancedPropertiesTab },
    ]}
  />
);