import React from "react";
import { ColumnHeightOutlined, ColumnWidthOutlined } from "@easyv/react-icons";
import { default as Select } from "../../easy-design/select";
import styles from "./positionConstraints.module.less";

const { Option } = Select;

const VerticalPositionEnum = Object.freeze({
  Top: "top",
  Bottom: "bottom",
  Center: "center",
  Scale: "scale",
  TopAndBottom: "topAndBottom",
});
const HorizontalPositionEnum = Object.freeze({
  Left: "left",
  Right: "right",
  Center: "center",
  Scale: "scale",
  LeftAndRight: "leftAndRight",
});

const verticalPositionOptions = [
  {
    label: "顶部",
    value: VerticalPositionEnum.Top,
  },
  {
    label: "底部",
    value: VerticalPositionEnum.Bottom,
  },
  {
    label: "居中",
    value: VerticalPositionEnum.Center,
  },
  {
    label: "缩放",
    value: VerticalPositionEnum.Scale,
  },
  {
    label: "顶部+底部",
    value: VerticalPositionEnum.TopAndBottom,
  },
];
const horizontalPositionOptions = [
  {
    label: "左侧",
    value: HorizontalPositionEnum.Left,
  },
  {
    label: "右侧",
    value: HorizontalPositionEnum.Right,
  },
  {
    label: "居中",
    value: HorizontalPositionEnum.Center,
  },
  {
    label: "缩放",
    value: HorizontalPositionEnum.Scale,
  },
  {
    label: "左侧+右侧",
    value: HorizontalPositionEnum.LeftAndRight,
  },
];

export const PositionConstraints = (props) => {
  const { className = "", value, onChange } = props;
  const verticalValue = value?.verticalValue || VerticalPositionEnum.Top;
  const horizontalValue = value?.horizontalValue || HorizontalPositionEnum.Left;
  const isLeftActive =
    horizontalValue === HorizontalPositionEnum.Left ||
    horizontalValue === HorizontalPositionEnum.LeftAndRight;
  const isRightActive =
    horizontalValue === HorizontalPositionEnum.Right ||
    horizontalValue === HorizontalPositionEnum.LeftAndRight;
  const isTopActive =
    verticalValue === VerticalPositionEnum.Top ||
    verticalValue === VerticalPositionEnum.TopAndBottom;
  const isBottomActive =
    verticalValue === VerticalPositionEnum.Bottom ||
    verticalValue === VerticalPositionEnum.TopAndBottom;
  const isVerticalCenterActive = verticalValue === VerticalPositionEnum.Center;
  const isHorizontalCenterActive = horizontalValue === HorizontalPositionEnum.Center;

  const renderLabel = (label, type) => {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 4,
          fontSize: 12,
          color: "rgba(117, 120, 129, 1)",
        }}
      >
        {type === "vertical" ? (
          <ColumnHeightOutlined style={{ color: "inherit", fontSize: "inherit" }} />
        ) : (
          <ColumnWidthOutlined style={{ color: "inherit", fontSize: "inherit" }} />
        )}
        <span style={{ color: "#fff" }}>{label}</span>
      </div>
    );
  };

  const commonVerticalStyle = {
    width: 10,
    height: 16,
    position: "absolute",
    left: "50%",
    transform: "translateX(-50%)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };
  const commonHorizontalStyle = {
    width: 14,
    height: 10,
    position: "absolute",
    top: "50%",
    transform: "translateY(-50%)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <div className={className} style={{ display: "flex", gap: 12 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
        <Select
          value={{ value: verticalValue }}
          onChange={(v) => {
            onChange?.({ verticalValue: v?.value, horizontalValue });
          }}
          labelInValue
          optionLabelProp="label"
          style={{ width: 110 }}
        >
          {verticalPositionOptions.map((item) => {
            return (
              <Option
                key={item.value}
                value={item.value}
                label={renderLabel(item.label, "vertical")}
              >
                {item.label}
              </Option>
            );
          })}
        </Select>
        <Select
          value={{ value: horizontalValue }}
          onChange={(v) => {
            onChange?.({ verticalValue, horizontalValue: v?.value });
          }}
          labelInValue
          optionLabelProp="label"
          style={{ width: 109 }}
        >
          {horizontalPositionOptions.map((item) => {
            return (
              <Option
                key={item.value}
                value={item.value}
                label={renderLabel(item.label, "horizontal")}
              >
                {item.label}
              </Option>
            );
          })}
        </Select>
      </div>
      {/* 布局示意图 */}
      <div
        style={{
          width: 92,
          height: 64,
          borderRadius: 2,
          border: "1px solid rgba(255, 255, 255, 0.12)",
          background: "#181A24",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          position: "relative",
        }}
      >
        {/* 顶部 */}
        <div
          className={styles.line}
          style={{
            ...commonVerticalStyle,
            top: 0,
          }}
          onClick={() => {
            onChange?.({ verticalValue: VerticalPositionEnum.Top, horizontalValue });
          }}
        >
          <div
            style={{
              height: 10,
              width: isTopActive ? 3 : 1,
              background: isTopActive ? "rgb(58, 137, 254)" : "rgb(117, 120, 129)",
              borderRadius: 999,
            }}
          />
        </div>
        {/* 底部 */}
        <div
          className={styles.line}
          style={{
            ...commonVerticalStyle,
            bottom: 0,
          }}
          onClick={() => {
            onChange?.({ verticalValue: VerticalPositionEnum.Bottom, horizontalValue });
          }}
        >
          <div
            style={{
              height: 10,
              width: isBottomActive ? 3 : 1,
              background: isBottomActive ? "rgb(58, 137, 254)" : "rgb(117, 120, 129)",
              borderRadius: 999,
            }}
          />
        </div>
        {/* 左侧 */}
        <div
          className={styles.line}
          style={{
            ...commonHorizontalStyle,
            left: 0,
          }}
          onClick={() => {
            onChange?.({ verticalValue, horizontalValue: HorizontalPositionEnum.Left });
          }}
        >
          <div
            style={{
              width: 10,
              height: isLeftActive ? 3 : 1,
              background: isLeftActive ? "rgb(58, 137, 254)" : "rgb(117, 120, 129)",
              borderRadius: 999,
            }}
          />
        </div>
        {/* 右侧 */}
        <div
          className={styles.line}
          style={{
            ...commonHorizontalStyle,
            right: 0,
          }}
          onClick={() => {
            onChange?.({ verticalValue, horizontalValue: HorizontalPositionEnum.Right });
          }}
        >
          <div
            style={{
              width: 10,
              height: isRightActive ? 3 : 1,
              background: isRightActive ? "rgb(58, 137, 254)" : "rgb(117, 120, 129)",
              borderRadius: 999,
            }}
          />
        </div>
        <div
          style={{
            width: 60,
            height: 32,
            backgroundColor: "rgba(58, 137, 254, 0.1)",
            borderRadius: 2,
            position: "relative",
          }}
        >
          {/* 横向中心 */}
          <div
            className={styles.line}
            style={{
              position: "absolute",
              left: "50%",
              top: "50%",
              transform: "translate(-50%, -50%)",
              width: 20,
              height: 10,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              zIndex: isHorizontalCenterActive ? 1 : 0,
            }}
            onClick={() => {
              onChange?.({ verticalValue, horizontalValue: HorizontalPositionEnum.Center });
            }}
          >
            <div
              style={{
                width: 11,
                height: isHorizontalCenterActive ? 3 : 1,
                background: isHorizontalCenterActive ? "rgb(58, 137, 254)" : "#757881",
                borderRadius: 999,
              }}
            />
          </div>
        </div>
        {/* 纵向中心 */}
        <div
          className={styles.line}
          style={{
            position: "absolute",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            width: 10,
            height: 15,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: isVerticalCenterActive ? 1 : 0,
          }}
          onClick={() => {
            onChange?.({ verticalValue: VerticalPositionEnum.Center, horizontalValue });
          }}
        >
          <div
            style={{
              width: isVerticalCenterActive ? 3 : 1,
              height: 11,
              background: isVerticalCenterActive ? "rgb(58, 137, 254)" : "#757881",
              borderRadius: 999,
            }}
          />
        </div>
      </div>
    </div>
  );
};