const className = (classNameStartsWith: string, useContains?: boolean) => `[class${useContains ? '*' : '^'}=${classNameStartsWith}]`

export default {
  select: (name: string, parent?: Element) => (parent || document).querySelector<HTMLElement>(className(name)),
  selectInput: (name: string, parent?: Element) => (parent || document).querySelector<HTMLInputElement>(className(name)),
  selectContains: (name: string, parent?: Element) => (parent || document).querySelector<HTMLElement>(className(name, true)),
  selectAll: (name: string, parent?: Element) => (parent || document).querySelectorAll<HTMLElement>(className(name)),
  rgbToHex: (rgb: string) => {
    const componentToHex = (c: number) => {
      const hex = c.toString(16).toUpperCase()
      return hex.length === 1 ? `0${hex}` : hex
    }
    const matches = /rgb\((\d+), (\d+), (\d+)\)/.exec(rgb)
    if (matches) {
      const transform = (match: string) => componentToHex(parseInt(match, 10))
      return `#${transform(matches[1])}${transform(matches[2])}${transform(matches[3])}`
    }
    return rgb
  },
}