import * as React from 'react' ; import { Box } from '@twilio-paste/box' ; import { useTheme } from '@twilio-paste/theme' ; import { useUIDSeed } from '@twilio-paste/uid-library' ; import { PopoverContainer , PopoverButton , Popover } from '@twilio-paste/popover' ; import type { GenericTokensShape } from '@twilio-paste/design-tokens/types/GenericTokensShape' ; import { Label } from '@twilio-paste/label' ; import { ChromePicker } from 'react-color' ; import type { ColorChangeHandler , ColorResult } from 'react-color' ; import { Input } from '@twilio-paste/input' ; import { ColorPickerIcon } from '@twilio-paste/icons/esm/ColorPickerIcon' ; import type { DesignerContextProps } from './DesignerContext' ; type ColorTokenInputProps = { bucket : keyof GenericTokensShape ; labelText : string ; tokenName : string ; tokenValue : string ; onChange : DesignerContextProps [ 'updateToken' ] ; } ; const isInRange = ( v ) : boolean => v >= 0 && v <= 255 ; export const ColorTokenInput = ( { bucket , tokenName , tokenValue , labelText , onChange , } ) => { const [ localValue , setLocalValue ] = React . useState ( tokenValue ) ; const theme = useTheme ( ) ; const seed = useUIDSeed ( ) ; React . useEffect ( ( ) => { setLocalValue ( tokenValue ) ; } , [ tokenValue ] ) ; const handleColorChange = ( color ) : void => { const { r , g , b , a } = color . rgb ; const finalValue = a !== 1 ? `rgba(${ r }, ${ g }, ${ b }, ${ a })` : `rgb(${ r }, ${ g }, ${ b })` ; if ( onChange != null ) { onChange ( bucket , tokenName , finalValue ) ; } setLocalValue ( finalValue ) ; } ; const handleInputChange = ( event ) : void => { const { value } = event . target ; const isRGB = value . startsWith ( 'rgb(' ) ; const isRGBA = value . startsWith ( 'rgba(' ) ; const valueParts = value . split ( ',' ) ; const partOne = Number . parseInt ( valueParts [ 0 ] . split ( '(' ) [ 1 ] , 10 ) ; const partTwo = Number . parseInt ( valueParts [ 1 ] , 10 ) ; const partThree = Number . parseInt ( valueParts [ 2 ] . replace ( ')' , '' ) , 10 ) ; const partFour = valueParts [ 3 ] ? Number . parseFloat ( valueParts [ 3 ] . replace ( ')' , '' ) ) : null ; if ( ( isRGB || isRGBA ) && value . endsWith ( ')' ) && ( valueParts . length === 3 || valueParts . length === 4 ) && isInRange ( partOne ) && isInRange ( partTwo ) && isInRange ( partThree ) ) { if ( ! partFour || ( isRGBA && partFour <= 1 && partFour >= 0 ) ) { if ( onChange != null ) { onChange ( bucket , tokenName , value ) ; } } } setLocalValue ( value ) ; } ; return ( < Box key = { tokenName } > < Label htmlFor = { seed ( tokenName ) } > { labelText } < /Label> < PopoverContainer baseId = { seed ( `popover-${ tokenName } `)}>
        <Input id={seed(tokenName)} name={tokenName} type="text" value={localValue} insertAfter={<PopoverButton variant="link" id={seed(` popover - $ { tokenName } `)}>
              <ColorPickerIcon decorative={false} size="sizeIcon20" title={` Change $ { labelText } color `}/>
            </PopoverButton>} onChange={handleInputChange}/>
        <Popover aria-label={` Change color for token : $ { labelText } . `}>
          <Box marginTop="space40" marginRight="space30">
            <ChromePicker onChange={handleColorChange} styles={{ default: { picker: { boxShadow: 'none' }, saturation: { borderRadius: theme.radii.borderRadius10 } } }} color={tokenValue} 
    // @ts-expect-error defaultView doesn't seem to be typed
    defaultView="rgb"/>
          </Box>
        </Popover>
      </PopoverContainer>
    </Box>);
};
