import { get } from "lodash";
import styled from "styled-components";

import { SquareBlockStyles } from "./types";

export const containerStyle: React.CSSProperties = {
  width: 250,
  height: 150,
  background: "#DDD",
  position: "relative",
  border: `5px solid #DDD`,
  borderRadius: 5,
  color: "white",
  fontFamily: "Roboto",
  fontSize: "9pt",
};

export const innerContainerStyle: React.CSSProperties = {
  ...containerStyle,
  border: "none",
  zoom: 1,
  width: 139,
  height: 74,
  left: 52,
  margin: 3,
  top: 35,
};

export const Trapezoid = styled.div`
  &:hover {
    opacity: 0.9;
  }
  &:active {
    opacity: 0.7;
  }
`;

export const getObjectFromStyle = (type, style) => ({
  top: get(style, `${type}Top`, 0),
  right: get(style, `${type}Right`, 0),
  bottom: get(style, `${type}Bottom`, 0),
  left: get(style, `${type}Left`, 0),
});

export const generateStyles = ({
  clipBigPercentage,
  clipSmallPercentage,
}): SquareBlockStyles => {
  const common: React.CSSProperties = {
    padding: 6,
    boxSizing: "border-box",
    position: "absolute",
    textAlign: "center",
  };

  return {
    label: {
      position: "absolute",
      zIndex: 20,
      padding: 5,
      fontSize: "8pt",
      textTransform: "uppercase",
      fontStyle: "italic",
      color: "white",
      fontFamily: "Roboto",
    },
    preview: { height: 1, width: 1, position: "absolute" },
    topLayer: {
      ...common,
      backgroundColor: "#999",
      width: "100%",
      top: 0,
      clipPath: `polygon(0% 0%, 100% 0%, ${clipBigPercentage}% 100%, ${clipSmallPercentage}% 100%)`,
      cursor: "n-resize",
    },
    rightLayer: {
      ...common,
      backgroundColor: "#AAA",
      right: 0,
      top: 0,
      height: "100%",
      width: 50,
      padding: 20,
      paddingTop: "25%",
      clipPath: `polygon(0% ${clipSmallPercentage}%, 100% 0%, 100% 100%, 0% ${clipBigPercentage}%)`,
      cursor: "e-resize",
    },
    bottomLayer: {
      ...common,
      backgroundColor: "#999",
      width: "100%",
      bottom: 0,
      clipPath: `polygon(0% 100%, 100% 100%, ${clipBigPercentage}% 0%, ${clipSmallPercentage}% 0%)`,
      cursor: "s-resize",
    },
    leftLayer: {
      ...common,
      backgroundColor: "#AAA",
      left: 0,
      top: 0,
      height: "100%",
      width: 50,
      padding: 20,
      paddingTop: "25%",
      clipPath: `polygon(0% 0%, 100% ${clipSmallPercentage}%, 100% ${clipBigPercentage}%, 0% 100%)`,
      cursor: "w-resize",
    },
  };
};