import React, { Component } from "react";
import "./styling.css";
interface Props {
  /**
   * The image url must be provided this url is a type string points to the location on image
   */

  url: string;

  /**
   * The image color (optional) can use any valid HTML color.
   */

  color?: string;

  /**
   * The image should animate ?(optional) if true then the animation will appear
   */

  animate?: boolean;

  /**
   * type of the image
   */

  type: "NONE" | "SQUARE" | "LONG" | "LONGSLANT";

  /**
   * event onClick (optional)
   */

  onCLick?: (e: any) => {};

  /**
   * event onMouseEnter (optional)
   */

  onMouseEnter?: (e: any) => {};

  /**
   * event onMouseLeave (optional)
   */

  onMouseLeave?: (e: any) => {};
}

interface State {
  /**
   * id is for uniqueness of different thumbnails (You can customize it according to your needs)
   */

  id?: any;
}

export default class ScrollComponent extends Component<Props, State> {
  state = {
    id: `${Math.random().toString(20).substr(2, new Date().getMilliseconds())}`,
  };

  /**
   * This Function Will Return the LONG type thumbnail along with its animations
   */

  __randerTypeLONG = () => {
    return (
      <>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            className="long-image-div-back"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center bottom",
              height: "130%",
              width: "50%",
            }}
          />
        </div>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            id={this.state.id}
            className="long-image-div-front"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center top",
              height: "120%",
              width: "50%",
            }}
          />
        </div>
      </>
    );
  };
  /**
   * This Function Will Return the LONGSLANT type thumbnail along with its animations
   */
  __randerTypeLONGSLANT = () => {
    return (
      <>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            className="longslant-image-div-back"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center bottom",
              height: "100%",
              width: "40%",
            }}
          />
        </div>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            id={this.state.id}
            className="longslant-image-div-front"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center top",
              height: "110%",
              width: "50%",
            }}
          />
        </div>
      </>
    );
  };
  /**
   * This Function Will Return the SQUARE type thumbnail along with its animations
   */
  __randerTypeSQUARE = () => {
    return (
      <>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            className="square-image-div-back-1"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center bottom",
              height: "100%",
              width: "32%",
            }}
          />
        </div>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            className="square-image-div-back-2"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center bottom",
              height: "100%",
              width: "32%",
            }}
          />
        </div>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            className="square-image-div-back-3"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center bottom",
              height: "140%",
              width: "32%",
            }}
          />
        </div>
        <div style={{ height: "12.375em", width: " 18.625em" }}>
          <div
            id={this.state.id}
            className="square-image-div-front"
            style={{
              background: "url(" + this.props.url + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center top",
              height: "110%",
              width: "32%",
            }}
          />
        </div>
      </>
    );
  };
  render() {
    let _Render = null;
    let animationType = "";
    if (this.props.type === "NONE" || this.props.type === "LONG") {
      _Render = this.__randerTypeLONG();
      animationType = "long-animation";
    } else if (this.props.type === "LONGSLANT") {
      _Render = this.__randerTypeLONGSLANT();
      animationType = "longslant-animation";
    } else if (this.props.type === "SQUARE") {
      _Render = this.__randerTypeSQUARE();
      animationType = "square-animation";
    }
    return (
      <div
        style={{
          backgroundColor: this.props.color ? this.props.color : "gray",
        }}
        className="main-div"
        onClick={this.props.onCLick}
        onMouseEnter={(e) => {
          if (this.props.animate) {
            let element = document.getElementById(this.state.id);
            element?.classList.add(animationType);
          }
          if (this.props.onMouseEnter) this.props.onMouseEnter(e);
        }}
        onMouseLeave={(e) => {
          if (this.props.animate) {
            let element = document.getElementById(this.state.id);
            element?.classList.remove(animationType);
          }
          if (this.props.onMouseLeave) this.props.onMouseLeave(e);
        }}
      >
        {_Render ||
          "SomeThing Went Wrong ! Make Sure Are Providing all the necessory arguments :)"}
      </div>
    );
  }
}