import { CSSProperties } from "styled-components";
import { TextAlign } from "../editor/Text";
import { objectFitOptions } from "../editor/Image";
import { Eases } from "../../../common/constants/AnimationDirection";
import { wrap } from "underscore";

export const TextContainerStyle = (
  fontSize: number,
  alignment?: TextAlign,
  color?: string,
  inStyle?: string,
  multiLineText?: boolean,
  speed?: number,
  fontFamily?: string
): CSSProperties => {
  const adjustTop = 2 * (fontSize * 1.125 - fontSize);
  let style: CSSProperties = {
    fontSize: `${fontSize}px`,
    whiteSpace: "nowrap",
    width: "100%",
    textAlign: `${alignment ?? TextAlign.LEFT}`,
    overflow: "hidden",
    marginTop: `-${adjustTop}px`,
    fontFamily: fontFamily,
  };

  if (multiLineText) {
    style = { ...style, whiteSpace: "break-spaces", height: "100%" };
  }

  if (color) {
    style = { ...style, color: `${color}` };
  }

  if (inStyle) {
    style = { ...style, ...JSON.parse(inStyle) };
  }

  return style;
};

export const StationNameContainerStyle = (): CSSProperties => {
  return {
    width: "100%",
  };
};

export const VideoContainerStyle = (): CSSProperties => {
  return {
    width: "100%",
    height: "100%",
    objectFit: "contain",
  };
};

export const VerticalLineStyle = (
  height: number,
  width: number,
  color: string
): CSSProperties => {
  return {
    borderLeft: `${width}px solid ${color}`,
    height: `${height}px`,
  };
};

export const RectangleStyle = (
  width: number,
  height: number,
  borderColor: string,
  borderWidth: number,
  fillColor: string,
  borderRadius: number
): CSSProperties => {
  return {
    border: `${borderWidth}px solid ${borderColor}`,
    width: `${width}px`,
    height: `${height}px`,
    backgroundColor: `${fillColor}`,
    borderRadius: `${borderRadius}px`,
    backgroundClip: "padding-box",
  };
};

export const ParamContainerStyle = (): CSSProperties => {
  return {
    width: "100%",
    height: "100%",
  };
};

export const MultilineTextContainerStyle = (
  fontSize: number,
  lines: number,
  inStyle?: string,
  color?: string,
  alignment?: TextAlign
): CSSProperties => {
  const adjustTop = 2 * (fontSize * 1.125 - fontSize);
  const adjustHeight = fontSize * lines * 1.125 + 5;
  const adjustLineHeight = fontSize + adjustTop / 2;

  let style: CSSProperties = {
    fontSize: `${fontSize}px`,
    width: "100%",
    textAlign: `${alignment ?? TextAlign.LEFT}`,
    wordWrap: "break-word",
    lineHeight: `${adjustLineHeight}px`,
    height: `${adjustHeight}px`,
    overflow: "hidden",
  };
  if (color) {
    style = { ...style, color: `${color}` };
  }

  if (inStyle) {
    style = { ...style, ...JSON.parse(inStyle) };
  }
  return style;
};

export const checkedMultilineTextContainerStyle = (
  fontSize: number,
  lines: number,
  inStyle?: string,
  color?: string,
  alignment?: TextAlign
): CSSProperties => {
  const adjustTop = 2 * (fontSize * 1.125 - fontSize);
  // const adjustHeight = fontSize * lines * 1.125 + 5; //Commentted for now, need to see impact
  const adjustLineHeight = fontSize + adjustTop / 2;

  let style: CSSProperties = {
    fontSize: `${fontSize}px`,
    width: "100%",
    textAlign: `${alignment ?? TextAlign.LEFT}`,
    wordWrap: "break-word",
    lineHeight: `${adjustLineHeight}px`,
    height: "auto",
    overflow: "hidden",
  };
  if (color) {
    style = { ...style, color: `${color}` };
  }

  if (inStyle) {
    style = { ...style, ...JSON.parse(inStyle) };
  }
  return style;
};

export const EmptyContainerStyle = (isPosition?: boolean): CSSProperties => {
  let style: CSSProperties = {
    width: "100%",
    height: "100%",
    backgroundColor: "transparent",
  };
  if (isPosition) {
    style = { ...style, position: "absolute" };
  }
  return style;
};

export const ImageContainerStyle = (
  objectFit?: objectFitOptions
): CSSProperties => {
  return {
    position: "absolute",
    objectFit: `${objectFit ?? objectFitOptions.CONTAIN}`,
    width: "100%",
    height: "100%",
  };
};

export const HourContainerStyle = (
  alignment?: TextAlign,
  inStyle?: string,
  fontSize?: string
): CSSProperties => {
  let style: CSSProperties = {
    fontSize: `${fontSize}px`,
    fontWeight: "bold",
    color: "rgb(37, 48, 59)",
    textAlign: `${alignment ?? TextAlign.LEFT}`,
  };

  if (inStyle) {
    style = { ...style, ...JSON.parse(inStyle) };
  }
  return style;
};

export const TrainLineContainerStyle = (color: string): CSSProperties => {
  return {
    height: "512px",
    width: "41px",
    backgroundColor: `${color}`,
    overflowY: "hidden",
  };
};

export const TrainLineThreeContainerStyle = (color: string): CSSProperties => {
  return {
    height: "455px",
    width: "41px",
    background: `${color}`,
    overflowY: "hidden",
    borderBottomRightRadius: "30px",
    borderBottomLeftRadius: "30px",
  };
};

export const TrainLineLastContainerStyle = (color: string): CSSProperties => {
  return {
    height: "109px",
    width: "41px",
    background: `${color}`,
    overflowY: "hidden",
    borderBottomRightRadius: "30px",
    borderBottomLeftRadius: "30px",
  };
};

export const TrainLineTwoContainerStyle = (color: string): CSSProperties => {
  return {
    height: "282px",
    width: "41px",
    background: `${color}`,
    overflowY: "hidden",
    borderBottomRightRadius: "30px",
    borderBottomLeftRadius: "30px",
  };
};

export const CircleContainerStyle = (
  width: number,
  height: number,
  borderColor: string,
  borderWidth: number,
  fillColor: string,
  borderRadius: number
): CSSProperties => {
  return {
    border: `${borderWidth}px solid ${borderColor}`,
    width: `${width}px`,
    height: `${height}px`,
    backgroundColor: `${fillColor}`,
    borderRadius: `${borderRadius}%`,
    backgroundClip: "padding-box",
  };
};

export const ConnectionContainerStyle = (
  width: number,
  connImageAlignment: string
): CSSProperties => {
  return {
    width: `${width}px`,
    height: "100%",
    position: "absolute",
    overflow: "hidden",
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent:
      connImageAlignment === "left"
        ? "flex-start"
        : connImageAlignment === "center"
          ? "center"
          : "flex-end",
    alignItems: "center",
  };
};

export const RemovableContentStyle = (
  connectionIconSize: number
): CSSProperties => {
  return {
    width: `${connectionIconSize}px` || "93px",
    height: `${connectionIconSize}px` || "93px",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  };
};

export const ConnectionImageContainerStyle = (
  connectionIconSize: number
): CSSProperties => {
  return {
    width: `${connectionIconSize}px` || "100%",
    height: `${connectionIconSize}px` || "100%",
  };
};

export const HorizontalLineContainerStyle = (
  width: number,
  height: number,
  color: string
): CSSProperties => {
  return {
    borderTop: `${height}px solid ${color}`,
    width: `${width}px`,
  };
};

export const ConnTrainMainContainerStyle = (): CSSProperties => {
  return {
    border: "14px solid black",
    width: "100%",
    height: "100%",
    backgroundColor: "white",
  };
};

export const ConnTrainLeftContainerStyle = (): CSSProperties => {
  return {
    position: "relative",
    width: "865px",
    minWidth: "865px",
    maxWidth: "865px",
  };
};

export const ConnTrainRightContainerStyle = (): CSSProperties => {
  return {
    position: "absolute",
    width: "997px",
    top: "0px",
    left: "988px",
  };
};

export const ConnTrainAbsoluteTextSpanContainerStyle = (
  color: string,
  left: number,
  top: number
): CSSProperties => {
  return {
    position: "absolute",
    fontSize: "54px",
    color: `${color}`,
    left: `${left}px`,
    top: `${top}px`,
  };
};

export const ConnTrainPositionedLeftTextContainerStyle = (
  left: number,
  top: number
): CSSProperties => {
  return {
    position: "absolute",
    top: `${top}px`,
    left: `${left}px`,
    whiteSpace: "nowrap",
    display: "flex",
    flexDirection: "row",
  };
};

export const ConnTrainTextSpanContainerStyle = (
  color: string
): CSSProperties => {
  return {
    fontSize: "54px",
    color: `${color}`,
  };
};

export const StationConnectionContainerStyle = (): CSSProperties => {
  return {
    position: "absolute",
    left: "137px",
    top: "43px",
    width: "215px",
  };
};

export const MultiLangTextContainerStyle = (): CSSProperties => {
  return {
    height: "100%",
    overflow: "hidden",
    padding: 0,
    margin: 0,
    fontFamily: "sans-serif",
  };
};

export const MultiLangListContainerStyle = (
  fontSize: number,
  color?: string,
  multiLineText?: boolean,
  inStyle?: string
): CSSProperties => {
  let style: CSSProperties = {
    fontSize: `${fontSize}px`,
    height: "100%",
    position: "relative",
    overflow: "hidden",
    margin: 0,
    padding: 0,
  };

  if (multiLineText) {
    style = { ...style, whiteSpace: "break-spaces", height: "100%" };
  }

  if (color) {
    style = { ...style, color: `${color}` };
  }
  if (inStyle) {
    style = { ...style, ...JSON.parse(inStyle) };
  }
  return style;
};

export const TemperatureContainerStyle = (
  alignment?: TextAlign,
  inStyle?: string
): CSSProperties => {
  let style: CSSProperties = {
    fontSize: "41px",
    fontWeight: "bold",
    color: "rgb(37, 48, 59)",
    textAlign: `${alignment ?? TextAlign.LEFT}`,
  };

  if (inStyle) {
    style = { ...style, ...JSON.parse(inStyle) };
  }
  return style;
};

export const MultiLangListTextAnimationStyle = (
  delay: number,
  itemCount: number,
  speed: number,
  direction: string
): CSSProperties => {
  let style: CSSProperties = {
    position: "absolute",
    paddingLeft: "1rem",
    animation: `ml-list-item-anim-${direction} ${itemCount * speed}s infinite ${Eases.In
      }`,
    animationDelay: `${delay}s`,
  };

  switch (direction) {
    case "right":
      style = { ...style, right: "100%" };
      break;

    case "left":
      style = { ...style, left: "100%" };
      break;

    case "up":
      style = { ...style, top: "-100%" };
      break;

    case "down":
      style = { ...style, top: "100%" };
      break;
  }

  return style;
};

export const AnimatedDrmContainerStyle = (
  width: number,
  height: number,
  color: string
): CSSProperties => {
  return {
    position: "relative",
    width: `${width}px`,
    height: `${height}px`,
    borderTop: `${height}px solid ${color}`,
  };
};

export const AnimatedLineContainerStyle = (
  width: number,
  height: number,
  color: string
): CSSProperties => {
  return {
    position: "relative",
    width: `${width}px`,
    height: `${height}px`,
    borderTop: `${height}px solid ${color}`,
  };
};