/*
Copyright 2021 Q-CTRL. All rights reserved.

Licensed under the Q-CTRL Terms of service (the "License"). Unauthorized
copying or use of this file, via any medium, is strictly prohibited.
Proprietary and confidential. You may not use this file except in compliance
with the License. You may obtain a copy of the License at

     https://q-ctrl.com/terms

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS. See the
License for the specific language.
*/
const {
  flattenColorPalette
} = require("../../utilities/convertColors");

function cleanRem(rem) {
  return parseFloat(rem.replace("rem", ""));
}

function createRem(rem) {
  return `${rem}rem`;
} // Components


module.exports = function ({
  addComponents,
  theme
}) {
  const colors = flattenColorPalette(theme("colors"));
  const colorDanger = colors.danger;
  const inputGroup = {
    ".input-group": {
      position: "relative",
      display: "flex",
      "&.icon-left, &.icon-right": {
        svg: {
          position: "absolute",
          top: "50%",
          transform: "translateY(-50%)"
        }
      },
      "&.input-group-danger": {
        input: {
          borderColor: colorDanger
        },
        svg: {
          color: colorDanger
        }
      },
      "&.input-group-disabled": {
        input: {
          backgroundColor: theme("colors.gray.0"),
          borderColor: theme("colors.gray.DEFAULT"),
          color: theme("colors.gray.300")
        },
        svg: {
          color: theme("colors.gray.300")
        }
      }
    }
  };
  const paddingXs = theme("borderSquash.xs");
  const [_paddingXsY, paddingXsX] = paddingXs.split(" ");
  const paddingSm = theme("borderSquash.sm");
  const [_paddingSmY, paddingSmX] = paddingSm.split(" ");
  const paddingMd = theme("borderSquash.md");
  const [_paddingMdY, paddingMdX] = paddingMd.split(" ");
  const paddingLg = theme("borderSquash.lg");
  const [_paddingLgY, paddingLgX] = paddingLg.split(" ");
  const paddingXl = theme("borderSquash.xl");
  const [_paddingXlY, paddingXlX] = paddingXl.split(" ");
  const inputGroupSizes = {
    ".input-group-xs": {
      input: {
        padding: paddingXs,
        fontSize: theme("fontSize.2xs"),
        lineHeight: theme("lineHeight.4"),
        borderRadius: theme("borderRadius.xs"),
        "&::placeholder": {
          lineHeight: theme("lineHeight.4"),
          fontSize: theme("fontSize.2xs")
        }
      },
      "&.icon-left": {
        input: {
          paddingLeft: createRem(cleanRem(paddingXsX) + cleanRem(theme("iconSize.2xs")) + cleanRem(theme("inline.sm")))
        },
        "svg:first-of-type": {
          left: paddingXsX
        }
      },
      "&.icon-right": {
        input: {
          paddingRight: createRem(cleanRem(paddingXsX) + cleanRem(theme("iconSize.2xs")) + cleanRem(theme("inline.sm")))
        },
        "svg:last-of-type": {
          right: paddingXsX
        }
      },
      svg: {
        width: theme("iconSize.2xs"),
        height: theme("iconSize.2xs")
      }
    },
    ".input-group-sm": {
      input: {
        padding: paddingSm,
        fontSize: theme("fontSize.xs"),
        lineHeight: theme("lineHeight.5"),
        borderRadius: theme("borderRadius.xs"),
        "&::placeholder": {
          fontSize: theme("fontSize.xs"),
          lineHeight: theme("lineHeight.5")
        }
      },
      "&.icon-left": {
        input: {
          paddingLeft: createRem(cleanRem(paddingSmX) + cleanRem(theme("iconSize.sm")) + cleanRem(theme("inline.sm")))
        },
        "svg:first-of-type": {
          left: paddingSmX
        }
      },
      "&.icon-right": {
        input: {
          paddingRight: createRem(cleanRem(paddingSmX) + cleanRem(theme("iconSize.sm")) + cleanRem(theme("inline.sm")))
        },
        "svg:last-of-type": {
          right: paddingSmX
        }
      },
      svg: {
        width: theme("iconSize.sm"),
        height: theme("iconSize.sm")
      }
    },
    ".input-group-md": {
      input: {
        padding: paddingMd,
        fontSize: theme("fontSize.base"),
        lineHeight: theme("lineHeight.6"),
        borderRadius: theme("borderRadius.sm"),
        "&::placeholder": {
          fontSize: theme("fontSize.base"),
          lineHeight: theme("lineHeight.6")
        }
      },
      "&.icon-left": {
        input: {
          paddingLeft: createRem(cleanRem(paddingMdX) + cleanRem(theme("iconSize.md")) + cleanRem(theme("inline.sm")))
        },
        "svg:first-of-type": {
          left: paddingMdX
        }
      },
      "&.icon-right": {
        input: {
          paddingRight: createRem(cleanRem(paddingMdX) + cleanRem(theme("iconSize.md")) + cleanRem(theme("inline.sm")))
        },
        "svg:last-of-type": {
          right: paddingMdX
        }
      },
      svg: {
        width: theme("iconSize.md"),
        height: theme("iconSize.md")
      }
    },
    ".input-group-lg": {
      input: {
        padding: paddingLg,
        fontSize: theme("fontSize.base"),
        lineHeight: theme("lineHeight.6"),
        borderRadius: theme("borderRadius.DEFAULT"),
        "&::placeholder": {
          fontSize: theme("fontSize.base"),
          lineHeight: theme("lineHeight.6")
        }
      },
      "&.icon-left": {
        input: {
          paddingLeft: createRem(cleanRem(paddingLgX) + cleanRem(theme("iconSize.md")) + cleanRem(theme("inline.md")))
        },
        "svg:first-of-type": {
          left: paddingLgX
        }
      },
      "&.icon-right": {
        input: {
          paddingRight: createRem(cleanRem(paddingLgX) + cleanRem(theme("iconSize.md")) + cleanRem(theme("inline.md")))
        },
        "svg:last-of-type": {
          right: paddingLgX
        }
      },
      svg: {
        width: theme("iconSize.md"),
        height: theme("iconSize.md")
      }
    },
    ".input-group-xl": {
      input: {
        padding: paddingXl,
        fontSize: theme("fontSize.lg"),
        lineHeight: theme("lineHeight.8"),
        borderRadius: theme("borderRadius.md"),
        "&::placeholder": {
          fontSize: theme("fontSize.lg"),
          lineHeight: theme("lineHeight.8")
        }
      },
      "&.icon-left": {
        input: {
          paddingLeft: createRem(cleanRem(paddingXlX) + cleanRem(theme("iconSize.lg")) + cleanRem(theme("inline.md")))
        },
        "svg:first-of-type": {
          left: paddingXlX
        }
      },
      "&.icon-right": {
        input: {
          paddingRight: createRem(cleanRem(paddingXlX) + cleanRem(theme("iconSize.lg")) + cleanRem(theme("inline.md")))
        },
        "svg:last-of-type": {
          right: paddingXlX
        }
      },
      svg: {
        width: theme("iconSize.lg"),
        height: theme("iconSize.lg")
      }
    }
  };
  addComponents([inputGroup, inputGroupSizes], {
    variants: ["responsive"]
  });
};