import { useColor } from 'use-color'

import { parseColor } from 'use-color/parser'
import { ColorInput } from 'use-color/types/ColorInput'

const givenColor: ColorInput = 'rgb(34, 114, 235)'
const color = parseColor(givenColor)

const [color] = useColor('#2272eb')
color.rgb // { r: 34, g: 114, b: 235 }
color.rgba // { r: 34, g: 114, b: 235, a: 1 }

const [color] = useColor('rgb(34, 114, 235)')
color.strings.hex // #2272eb

const [color] = useColor('rgba(34, 114, 235, 0.5)')
color.strings.hex // #2272eb80
color.rgb // { r: 34, g: 114, b: 235 }
color.rgba // { r: 34, g: 114, b: 235, a: 0.5 }

const [color] = useColor({ r: 255, g: 255, b: 255 })

color.strings.hex // '#ffffff'
color.strings.rgb // 'rgb(255, 255, 255)'
color.strings.rgba // 'rgb(255, 255, 255, 1)'

const [color] = useColor({ r: 255, g: 255, b: 255 }, {
  hex: {
    transform: 'lowercase', // 'lowercase' | 'uppercase'
    compress: false, // boolean
    ignoreAlpha: false, // boolean
  }
})

// when
const [color, setColor] = useColor({ r: 144, g: 194, b: 255 })
setColor('#fff')
setColor('rgb(255, 255, 255)')
setColor({ r: 255, g: 255, b: 255 })

// then
color.rgb // { r: 255, g: 255, b: 255 }

// when
setColor(({ b }) => `rgba(144, 194, ${b})`)
setColor(({ b }) => ({ r: 144, g: 194, b }))

// then
color.rgb // { r: 144, g: 194, b: 255 }