import CSS from "./CSS";

describe("CSS", () => {
  test("camelcaseToDashed", () => {
    const str = "helloWorld";
    expect(CSS.camelcaseToDashed(str)).toBe("hello-world");
    const str2 = "WebkitUserSelect";
    expect(CSS.camelcaseToDashed(str2)).toBe("-webkit-user-select");
    const str3 = "-webkit-user-select";
    expect(CSS.camelcaseToDashed(str3)).toBe("-webkit-user-select");
  });

  test("getCssObjectWithDashedProperties", () => {
    expect(
      CSS.getCssObjectWithDashedProperties({
        WebkitUserSelect: "none",
      })
    ).toBe(`{"-webkit-user-select": "none"}`);
  });
  test("fromCssInJstoCssString", () => {
    expect(
      CSS.fromCssInJstoCssString(
        {
          backgroundColor: "green",
          width: "30px",
          height: "30px",
          ":active": {
            backgroundColor: "red",
          },
        },
        true
      )
    ).toBe(
      `.container {
    background-color: green;
    width: 30px;
    height: 30px;
      }
      .container:active {
    background-color: red;
}`
    );
  });

  test("fromCssInJstoCssString - ensure webkit prefix is kept", () => {
    expect(
      CSS.fromCssInJstoCssString(
        {
          "-webkit-fill-color": "green",
        },
        true
      )
    ).toBe(`.container { -webkit-fill-color: green; }`);
  });
  test("getCssObjectWithDashedProperties", () => {
    const result = CSS.getCssObjectWithDashedProperties({
      backgroundColor: "green",
      width: "30px",
      height: "30px",
    });
    expect(result).toEqual({
      "background-color": "green",
      width: "30px",
      height: "30px",
    });
  });

  test("fromCssInJsToJSONAttributes", () => {
    expect(
      CSS.fromCssInJsToJSONAttributes({
        "@media (min-width: 768px)": {
          padding: "12px 50px",
        },
        ":active": {
          boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
          outline: "0",
        },
        ":focus": {
          textDecoration: "none",
        },
        ":hover": {
          textDecoration: "none",
        },
        ":not([disabled]):active": {
          boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
          transform: "translate(2px, 2px)",
        },

        WebkitUserSelect: "none",
        appearance: "button",
        backgroundColor: "#000",
        backgroundImage: "none",
        border: "1px solid #000",
        borderRadius: "4px",
        boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
        boxSizing: "border-box",
        color: "#fff",
        cursor: "pointer",
        display: "inline-block",
        fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
        fontSize: "14px",
        fontWeight: "400",
        lineHeight: "20px",
        margin: "0 5px 10px 0",
        overflow: "visible",
        padding: "12px 40px",
        textAlign: "center",
        textTransform: "none",
        touchAction: "manipulation",
        userSelect: "none",
        verticalAlign: "middle",
        whiteSpace: "nowrap",
      })
    ).toEqual({
      attributes: {},
      children: {
        ".container": {
          attributes: {
            "-webkit-user-select": "none",
            appearance: "button",
            "background-color": "#000",
            "background-image": "none",
            border: "1px solid #000",
            "border-radius": "4px",
            "box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
            "box-sizing": "border-box",
            color: "#fff",
            cursor: "pointer",
            display: "inline-block",
            "font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "line-height": "20px",
            margin: "0 5px 10px 0",
            overflow: "visible",
            padding: "12px 40px",
            "text-align": "center",
            "text-transform": "none",
            "touch-action": "manipulation",
            "user-select": "none",
            "vertical-align": "middle",
            "white-space": "nowrap",
          },
          children: {},
        },
        ".container:active": {
          attributes: {
            "box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
            outline: "0",
          },
          children: {},
        },
        ".container:focus": {
          attributes: {
            "text-decoration": "none",
          },
          children: {},
        },
        ".container:hover": {
          attributes: {
            "text-decoration": "none",
          },
          children: {},
        },
        ".container:not([disabled]):active": {
          attributes: {
            "box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
            transform: "translate(2px, 2px)",
          },
          children: {},
        },
        "@media (min-width: 768px)": {
          attributes: {},
          children: {
            ".container": {
              attributes: {
                padding: "12px 50px",
              },
              children: {},
            },
          },
        },
      },
    });
  });
  test("fromflatJSONToJSONAttributes", () => {
    expect(
      CSS.fromflatJSONToJSONAttributes({
        "@media (min-width: 768px)": {
          padding: "12px 50px",
        },
        ":active": {
          boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
          outline: "0",
        },
        ":focus": {
          textDecoration: "none",
        },
        ":hover": {
          textDecoration: "none",
        },
        ":not([disabled]):active": {
          boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
          transform: "translate(2px, 2px)",
        },
        root: {
          WebkitUserSelect: "none",
          appearance: "button",
          backgroundColor: "#000",
          backgroundImage: "none",
          border: "1px solid #000",
          borderRadius: "4px",
          boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
          boxSizing: "border-box",
          color: "#fff",
          cursor: "pointer",
          display: "inline-block",
          fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
          fontSize: "14px",
          fontWeight: "400",
          lineHeight: "20px",
          margin: "0 5px 10px 0",
          overflow: "visible",
          padding: "12px 40px",
          textAlign: "center",
          textTransform: "none",
          touchAction: "manipulation",
          userSelect: "none",
          verticalAlign: "middle",
          whiteSpace: "nowrap",
        },
      })
    ).toEqual({
      attributes: {},
      children: {
        ".container": {
          attributes: {
            "-webkit-user-select": "none",
            appearance: "button",
            "background-color": "#000",
            "background-image": "none",
            border: "1px solid #000",
            "border-radius": "4px",
            "box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
            "box-sizing": "border-box",
            color: "#fff",
            cursor: "pointer",
            display: "inline-block",
            "font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "line-height": "20px",
            margin: "0 5px 10px 0",
            overflow: "visible",
            padding: "12px 40px",
            "text-align": "center",
            "text-transform": "none",
            "touch-action": "manipulation",
            "user-select": "none",
            "vertical-align": "middle",
            "white-space": "nowrap",
          },
          children: {},
        },
        ".container:active": {
          attributes: {
            "box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
            outline: "0",
          },
          children: {},
        },
        ".container:focus": {
          attributes: {
            "text-decoration": "none",
          },
          children: {},
        },
        ".container:hover": {
          attributes: {
            "text-decoration": "none",
          },
          children: {},
        },
        ".container:not([disabled]):active": {
          attributes: {
            "box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
            transform: "translate(2px, 2px)",
          },
          children: {},
        },
        "@media (min-width: 768px)": {
          attributes: {},
          children: {
            ".container": {
              attributes: {
                padding: "12px 50px",
              },
              children: {},
            },
          },
        },
      },
    });
  });

  test("toJSONAttributes", () => {
    //     expect(
    //       CSS.toJSONAttributes(
    //         `@media (max-width: 800px) {
    //             #main #comments {
    //               margin: 0px;
    //               width: auto;
    //               background: red;
    //             }
    //             #main #buttons {
    //               padding: 5px 10px;
    //               color: blue;
    //             }
    //           }
    //           #main #content {
    //             margin: 0 7.6%;
    //             width: auto;
    //           }
    //           #nav-below {
    //             border-bottom: 1px solid #ddd;
    //             margin-bottom: 1.625em;
    //             background-image: url(http://www.example.com/images/im.jpg);
    //           }
    // `
    //       )
    //     ).toEqual({
    //       attributes: {},
    //       children: {
    //         "#main #content": {
    //           attributes: { margin: "0 7.6%", width: "auto" },
    //           children: {},
    //         },
    //         "#nav-below": {
    //           attributes: {
    //             "background-image": "url(http://www.example.com/images/im.jpg)",
    //             "border-bottom": "1px solid #ddd",
    //             "margin-bottom": "1.625em",
    //           },
    //           children: {},
    //         },
    //         "@media (max-width: 800px)": {
    //           attributes: {},
    //           children: {
    //             "#main #buttons": {
    //               attributes: { color: "blue", padding: "5px 10px" },
    //               children: {},
    //             },
    //             "#main #comments": {
    //               attributes: { background: "red", margin: "0px", width: "auto" },
    //               children: {},
    //             },
    //           },
    //         },
    //       },
    //     });

    expect(
      CSS.toJSONAttributes(
        `  .button-50 {
            appearance: button;
            background-color: #000;
            background-image: none;
            border: 1px solid #000;
            border-radius: 4px;
            box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin: 0 5px 10px 0;
            overflow: visible;
            padding: 12px 40px;
            text-align: center;
            text-transform: none;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
            vertical-align: middle;
            white-space: nowrap;
          }
          
          .button-50:focus {
            text-decoration: none;
          }
          
          .button-50:hover {
            text-decoration: none;
          }
          
          .button-50:active {
            box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
            outline: 0;
          }
          
          .button-50:not([disabled]):active {
            box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
            transform: translate(2px, 2px);
          }
          
          @media (min-width: 768px) {
            .button-50 {
              padding: 12px 50px;
            }
          }
  `
      )
    ).toEqual({
      attributes: {},
      children: {
        ".button-50": {
          attributes: {
            "-webkit-user-select": "none",
            appearance: "button",
            "background-color": "#000",
            "background-image": "none",
            border: "1px solid #000",
            "border-radius": "4px",
            "box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
            "box-sizing": "border-box",
            color: "#fff",
            cursor: "pointer",
            display: "inline-block",
            "font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "line-height": "20px",
            margin: "0 5px 10px 0",
            overflow: "visible",
            padding: "12px 40px",
            "text-align": "center",
            "text-transform": "none",
            "touch-action": "manipulation",
            "user-select": "none",
            "vertical-align": "middle",
            "white-space": "nowrap",
          },
          children: {},
        },
        ".button-50:active": {
          attributes: {
            "box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
            outline: "0",
          },
          children: {},
        },
        ".button-50:focus": {
          attributes: {
            "text-decoration": "none",
          },
          children: {},
        },
        ".button-50:hover": {
          attributes: {
            "text-decoration": "none",
          },
          children: {},
        },
        ".button-50:not([disabled]):active": {
          attributes: {
            "box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
            transform: "translate(2px, 2px)",
          },
          children: {},
        },
        "@media (min-width: 768px)": {
          attributes: {},
          children: {
            ".button-50": {
              attributes: {
                padding: "12px 50px",
              },
              children: {},
            },
          },
        },
      },
    });
  });

  test("getCssObjectWithCamelcaseProperties", () => {
    const values = CSS.getCssObjectWithCamelcaseProperties({
      "background-color": "#000",
      "background-image": "none",
      border: "1px solid #000",
      "border-radius": "4px",

      "-webkit-user-select": "none",
    });
    expect(values).toEqual({
      backgroundColor: "#000",
      backgroundImage: "none",
      border: "1px solid #000",
      borderRadius: "4px",
      WebkitUserSelect: "none",
    });
  });

  test("parseCss", () => {
    expect(
      CSS.parseCss(
        `
  .button-50 {
    appearance: button;
    background-color: #000;
    background-image: none;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 5px 10px 0;
    overflow: visible;
    padding: 12px 40px;
    text-align: center;
    text-transform: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
  }
  
  .button-50:focus {
    text-decoration: none;
  }
  
  .button-50:hover {
    text-decoration: none;
  }
  
  .button-50:active {
    box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
    outline: 0;
  }
  
  .button-50:not([disabled]):active {
    box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
    transform: translate(2px, 2px);
  }
  
  @media (min-width: 768px) {
    .button-50 {
      padding: 12px 50px;
    }
  }
  `
      )
    ).toEqual({
      ".button-50": {
        "-webkit-user-select": "none",
        appearance: "button",
        "background-color": "#000",
        "background-image": "none",
        border: "1px solid #000",
        "border-radius": "4px",
        "box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
        "box-sizing": "border-box",
        color: "#fff",
        cursor: "pointer",
        display: "inline-block",
        "font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
        "font-size": "14px",
        "font-weight": "400",
        "line-height": "20px",
        margin: "0 5px 10px 0",
        overflow: "visible",
        padding: "12px 40px",
        "text-align": "center",
        "text-transform": "none",
        "touch-action": "manipulation",
        "user-select": "none",
        "vertical-align": "middle",
        "white-space": "nowrap",
      },
      ".button-50:active": {
        "box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
        outline: "0",
      },
      ".button-50:focus": {
        "text-decoration": "none",
      },
      ".button-50:hover": {
        "text-decoration": "none",
      },
      ".button-50:not([disabled]):active": {
        "box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
        transform: "translate(2px, 2px)",
      },
      "@media (min-width: 768px)": {},
    });
  });

  test("getSelectorValues", () => {
    expect(
      CSS.getSelectorValues(
        `
  .button-50 {
    appearance: button;
    background-color: #000;
    background-image: none;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 5px 10px 0;
    overflow: visible;
    padding: 12px 40px;
    text-align: center;
    text-transform: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
  }
  
  .button-50:focus {
    text-decoration: none;
  }
  
  .button-50:hover {
    text-decoration: none;
  }
  
  .button-50:active {
    box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
    outline: 0;
  }
  
  .button-50:not([disabled]):active {
    box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
    transform: translate(2px, 2px);
  }
  
  @media (min-width: 768px) {
    .button-50 {
      padding: 12px 50px;
    }
  }
  `
      )
    ).toEqual({
      "@media (min-width: 768px)": {},
      ":active": {
        boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
        outline: "0",
      },
      ":focus": {
        textDecoration: "none",
      },
      ":hover": {
        textDecoration: "none",
      },
      ":not([disabled]):active": {
        boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
        transform: "translate(2px, 2px)",
      },
      root: {
        WebkitUserSelect: "none",
        appearance: "button",
        backgroundColor: "#000",
        backgroundImage: "none",
        border: "1px solid #000",
        borderRadius: "4px",
        boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
        boxSizing: "border-box",
        color: "#fff",
        cursor: "pointer",
        display: "inline-block",
        fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
        fontSize: "14px",
        fontWeight: "400",
        lineHeight: "20px",
        margin: "0 5px 10px 0",
        overflow: "visible",
        padding: "12px 40px",
        textAlign: "center",
        textTransform: "none",
        touchAction: "manipulation",
        userSelect: "none",
        verticalAlign: "middle",
        whiteSpace: "nowrap",
      },
    });
  });

  test("toCssInJs", () => {
    expect(
      CSS.toCssInJs(
        `
  .button-50 {
    appearance: button;
    background-color: #000;
    background-image: none;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 5px 10px 0;
    overflow: visible;
    padding: 12px 40px;
    text-align: center;
    text-transform: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
  }
  
  .button-50:focus {
    text-decoration: none;
  }
  
  .button-50:hover {
    text-decoration: none;
  }
  
  .button-50:active {
    box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
    outline: 0;
  }
  
  .button-50:not([disabled]):active {
    box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
    transform: translate(2px, 2px);
  }
  
  @media (min-width: 768px) {
    .button-50 {
      padding: 12px 50px;
    }
  }
  `
      )
    ).toEqual({
      "@media (min-width: 768px)": {},
      ":active": {
        boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
        outline: "0",
      },
      ":focus": {
        textDecoration: "none",
      },
      ":hover": {
        textDecoration: "none",
      },
      ":not([disabled]):active": {
        boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
        transform: "translate(2px, 2px)",
      },
      WebkitUserSelect: "none",
      appearance: "button",
      backgroundColor: "#000",
      backgroundImage: "none",
      border: "1px solid #000",
      borderRadius: "4px",
      boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
      boxSizing: "border-box",
      color: "#fff",
      cursor: "pointer",
      display: "inline-block",
      fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
      fontSize: "14px",
      fontWeight: "400",
      lineHeight: "20px",
      margin: "0 5px 10px 0",
      overflow: "visible",
      padding: "12px 40px",
      textAlign: "center",
      textTransform: "none",
      touchAction: "manipulation",
      userSelect: "none",
      verticalAlign: "middle",
      whiteSpace: "nowrap",
    });
  });
});