import React from "react";
import { Droppable } from "react-beautiful-dnd";
import { Dropzones } from "./types";
import Fade from "@material-ui/core/Fade";
import { drawerWidth } from "../Drawer/constants";
import PinnedSvg from "./assets/pinned.svg";
import UnpinnedSvg from "./assets/unpinned-animated.svg";
import { getActiveClasses } from "../utility/active-classes";

interface Props {
  isDraggingAny: boolean;
}

export default function UnpinnedDropZone({ isDraggingAny }: Props) {
  return (
    <Fade in={isDraggingAny}>
      <div
        className="auik-h-screen auik-absolute auik-px-16 auik-flex auik-items-center"
        style={{ left: "100%", width: drawerWidth }}
      >
        <div className="auik-bg-blue-700 auik-opacity-75 auik-absolute auik-inset-0 auik-z-10"></div>
        <Droppable droppableId={Dropzones.UNPINNED_DROP_ZONE}>
          {(provided, snapshot) => (
            <div
              className={getActiveClasses([
                "auik-z-20 auik-w-full auik-rounded-sm auik-py-40 auik-flex auik-flex-col auik-items-center auik-relative auik-border-dashed",
                {
                  "auik-border-2 auik-border-white": snapshot.isDraggingOver,
                  "auik-border auik-border-grey-700": !snapshot.isDraggingOver
                }
              ])}
              ref={provided.innerRef}
              {...provided.droppableProps}
            >
              <div
                className={getActiveClasses([
                  "auik-absolute auik-inset-0 auik-z-10 auik-pointer-events-none auik-bg-blue-400 auik-transition-opacity auik-transition-250 auik-transition-ease",
                  {
                    "auik-opacity-0": !snapshot.isDraggingOver,
                    "auik-opacity-25": snapshot.isDraggingOver
                  }
                ])}
              ></div>
              <div className="auik-relative auik-flex auik-flex-col auik-items-center auik-z-20">
                <div className="auik-mb-8">
                  {!snapshot.isDraggingOver && <PinnedSvg />}
                  {snapshot.isDraggingOver && <UnpinnedSvg />}
                </div>
                <div className="auik-text-white auik-text-lg auik-leading-tight auik-text-center">
                  Drop icon here to unpin <br /> from LHS menu
                </div>
              </div>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    </Fade>
  );
}